效果展示
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>