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

最新推荐文章于 2024-08-26 19:16:26 发布

廖圣平

最新推荐文章于 2024-08-26 19:16:26 发布

阅读量1.4w

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/qq_22823581/article/details/78079520

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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%