css 字体 图片 动画

字体摇摆

<text>开始出题</text>

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