字体摇摆
<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
);
}
}