css怎么让div动起来,实现动画效果一直在动

xiaoxiao2021-02-28  6

<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s infinite alternate; } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } </style> </head> <body> <p>本例在 Internet Explorer 中无效。</p> <div></div> </body> </html>

把上面的代码放置到w3里面测试:http://www.w3school.com.cn/tiy/t.asp?f=css3_animation3

通过测试可以发现,我这边的代码是省略了浏览器兼容问题,只是拿出了一个能作用到的例子来试验:

animation:myfirst 5s infinite alternate;  这一句话是最为重要的,就以这个分析

animation 定义的是这个是一个动画,命名这个动画叫做myfirst  , 定义整个完成周期为  5s , infinite ,如果不加这个元素,这个动画就会完成 0%--100%就结束了, 如果我们需要永远的动下去,这个元素起到了循环的作用。alternate 让 这个动画进行反复与上个周期相反的走  ->    100% --0%

转载请注明原文地址: https://www.6miu.com/read-1150049.html

最新回复(0)