css 字体 图片 动画

字体摇摆

开始出题

text{
display: block;
animation: star 1s linear infinite;
}
@keyframes star {
0% {
transform: rotate( 0 );
}
50% {
transform: rotate( 6deg );
}
100% {
transform: rotate( -6deg );
}
}


图片渐进渐出

< image src= "http://ovhvevt35.bkt.clouddn.com/test/what.png" mode= 'widthFix'> image >

image {animation:mySee 5s infinite;}

@keyframes mySee
{
0% { right: -20px;}
30% { right: 0px;}
60% { right: 0px}
100% { right: -20px}
}


字旋转360度

< view class= 'font'>
< text class= 'font1'> text >
< text class= 'font2'> text >
< text class= 'font3'> text >
< text class= 'font4'> text >
view >

.font text{

animation: myMove 6s infinite;
}

@keyframes myMove{
0%{
transform: rotateY( 0 );
}
25%{
transform: rotateY( -360deg );
}
50%{
transform: rotateY( 0 );
}
100%{
transform: rotateY( -360deg );
}
}

你可能感兴趣的:(css)