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 );

}

}