这是通过CSS3实现的简单的动画,同学们可以自己敲一下,体验一下,相关的数据如颜色之类大家可以根据需要自行更改
html文件只要在body里创建一个空div既可以了
css文件如下:
div{
width:100px;
height:100px;
background-color: red;
position:relative;
animation:anim 5s infinite alternate;
-webkit-animation:anim 5s infinite alternate;
}
@keyframes anim{
0%{background:red; left:0px; top:0px;}
25%{background:#ccffcc; left:200px; top:0px;}
50%{background:blue; left:200px; top:200px;}
75%{background:#00ff00; left:0px; top:200px;}
100%{background:red; left:0px; top:0px;}
}
@-webkit-keyframes anim{
0%{background:red; left:0px; top:0px;}
25%{background:#ccffcc; left:200px; top:0px;}
50%{background:blue; left:200px; top:200px;}
75%{background:#00ff00; left:0px; top:200px;}
100%{background:red; left:0px; top:0px;}
} |
|