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>

相关阅读:
使用CDN后，PHP如何获取用户的真是IP？
git常用命令整理
svn常用命令
Ansible 运维自动化（一）
grep 简单笔记
sed 笔记
awk命令笔记
无限极分类(一)获得树结构
php自定义函数求取平方根
class path resource [config.xml] cannot be opened because it does not exist

原文地址：https://www.cnblogs.com/zzmx0/p/12539241.html