- CSS代码:
- .image{
- width: 100px;
- height: 100px;
- /* background-color: forestgreen;*/
- position: relative;
- -webkit-animation: anim 5s;
- -moz-animation: anim 5s;
- -ms-animation: anim 5s;
- -o-animation: anim 5s;
- animation: anim 5s infinite alternate;
- }
- @-webkit-keyframes anim {
- 0%{
- background-color: aliceblue;
- left: 0px;
- top: 0px;
- }
- 25%{
- background-color: aqua;
- left: 200px;
- top: 0px;
- }
- 50%{
- background-color: blue;
- left: 200px;
- top: 200px;
- }
- 75%{
- background-color: blueviolet;
- left: 0px;
- top: 200px;
- }
- 100%{
- background-color: chartreuse;
- left: 0px;
- top: 0px;
- }
- }
- @-moz-keyframes anim{
- 0%{
- background-color: aliceblue;
- left: 0px;
- top: 0px;
- }
- 25%{
- background-color: aqua;
- left: 200px;
- top: 0px;
- }
- 50%{
- background-color: blue;
- left: 200px;
- top: 200px;
- }
- 75%{
- background-color: blueviolet;
- left: 0px;
- top: 200px;
- }
- 100%{
- background-color: chartreuse;
- left: 0px;
- top: 0px;
- }
- }
- @-ms-keyframes anim {
- 0%{
- background-color: aliceblue;
- left: 0px;
- top: 0px;
- }
- 25%{
- background-color: aqua;
- left: 200px;
- top: 0px;
- }
- 50%{
- background-color: blue;
- left: 200px;
- top: 200px;
- }
- 75%{
- background-color: blueviolet;
- left: 0px;
- top: 200px;
- }
- 100%{
- background-color: chartreuse;
- left: 0px;
- top: 0px;
- }
- }
- @-o-keyframes anim {
- 0%{
- background-color: aliceblue;
- left: 0px;
- top: 0px;
- }
- 25%{
- background-color: aqua;
- left: 200px;
- top: 0px;
- }
- 50%{
- background-color: blue;
- left: 200px;
- top: 200px;
- }
- 75%{
- background-color: blueviolet;
- left: 0px;
- top: 200px;
- }
- 100%{
- background-color: chartreuse;
- left: 0px;
- top: 0px;
- }
- }
- html;
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>动画</title>
- <link rel="stylesheet" type="text/css" >
- </head>
- <body>
- <div class="contaner">
- <div class="image">
- </div>
- </div>
- </body>
- </html>
来源: http://www.phpxs.com/code/1006042/