<!DOCTYPE html>
<html>
<head>
<style>
#you{
width:200px;
height:200px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst{
0% {background:red; transform:rotate(0deg);}
25% {background:yellow;transform:rotate(30deg);}
50% {background:blue;transform:rotate(90deg);}
75% {background:purple;transform:rotate(120deg);}
100% {background:green;transform:rotate(150deg);}
}
</style>
</head>
<body>
<div id="you">
<img src="..\img\马保国.jpg">
</div>
<p>
<b>
注释：
</b>
当动画完成时，会变回初始的样式。
</p>
<p>
<b>
注释：
</b>
本例在 Internet Explorer 中无效。
</p>
</body>
</html>
扫一扫
11-11
8295
8295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
