css动画效果

效果展示

 

 











css代码如下

 1 div{
 2         width: 100px;
 3         height: 100px;
 4         background-color: red;
 5         position: relative;
 6         animation: anim 5s infinite alternate;
 7         -webkit-animation: anim 5s infinite alternate;
 8         }
 9 @keyframes anim {
10         0%{background: red;left: 0px;top: 0px}
11         25%{background: blue;left: 200px;top: 0px}
12         50%{background: #ccffcc;left: 200px;top: 200px;}
13         75%{background: #00ffff;left: 0px;top: 200px}
14         100%{background: red;left: 0px;top: 0px}
15         }
16 @-webkit-keyframes anim {
17         0%{background: red;left: 0px;top: 0px}
18         25%{background: blue;left: 200px;top: 0px}
19         50%{background: #ccffcc;left: 200px;top: 200px;}
20         75%{background: #00ffff;left: 0px;top: 200px}
21         100%{background: red;left: 0px;top: 0px}
22         }</style>

 

posted @ 2020-03-21 14:29  组装梦想  阅读(122)  评论(0)  编辑  收藏  举报