下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家,也给大家做个参考。
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" href="css/style02.css"> </head> <body> <div class="contaner"> <div class="image"> </div> </div> </body> </html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
原文链接:https://www.f2er.com/css/456809.html