一个简单的CSS3重复动画

最新推荐文章于 2022-12-23 23:02:10 发布

落雨名称被占用

最新推荐文章于 2022-12-23 23:02:10 发布

阅读量4.5k

点赞数

本文链接：https://blog.csdn.net/ly272864318/article/details/49496005

版权

本文探讨了CSS3在移动端动画中的应用趋势，并分享了一个简单的CSS3动画代码示例，展示了一个未知具体应用场景但有趣的视觉效果。

摘要由CSDN通过智能技术生成

随着手机性能越来越好CSS3动画在移动端中运用也越来越多，各种技术大牛写出来各种炫酷的效果；

本着不想被行业所淘汰的心态，最近也在看关于CSS3动画方面的东西；

然后也想去写点东西，下面贴代码吧!

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>

</head>
<body>
    <div class="color-box">
      <span class="red"></span>
      <span class="blue"></span>
      <span class="yellow"></span>
    </div>
</body>
</html>

CSS代码如下：

* {
  margin： 0;
  padding: 0;
}

.color-box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: box;
  width: 300px;
  margin: 80px auto;
}

.color-box span {
  display: block;
  width: 100px;
  height: 30px;
}

.color-box span:bef