一个简单的CSS3重复动画

来源：互联网发布：布尔型数据编辑：程序博客网时间：2024/05/17 04:24

随着手机性能越来越好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:before {  content: "";  display: block;  width: 100%;  height: 30px;}.red,.color-box .red:before {  background-color: rgb(232, 88, 77);}.blue,.color-box .blue:before {  background-color: rgb(60, 210, 233);}.yellow,.color-box .yellow:before {  background-color: rgb(255, 239, 81);}.color-box .red:before {  -webkit-animation: red 2s infinite;}.color-box .blue:before {  -webkit-animation: blue 2s infinite;}.color-box .yellow:before {  -webkit-animation: yellow 2s infinite;}@-webkit-keyframes slateY1 {   0% { -webkit-transform: translateY(0px);}  14.3% { -webkit-transform: translateY(-100%);}  28.6% { -webkit-transform: translateY(0px);}  42.8% { -webkit-transform: translateY(0px);}  57% { -webkit-transform: translateY(0px);}  85.7% { -webkit-transform: translateY(0px);}  100% { -webkit-transform: translateY(0px);}}@keyframes slateY1 {   0% { transform: translateY(0px);}  14.3% { transform: translateY(-100%);}  28.6% { transform: translateY(0px);}  42.8% { transform: translateY(0px);}  57% { transform: translateY(0px);}  85.7% { transform: translateY(0px);}  100% { transform: translateY(0px);}}@-webkit-keyframes slateY2 {   0% { -webkit-transform: translateY(0px);}  14.3% { -webkit-transform: translateY(0px);}  28.6% { -webkit-transform: translateY(0px);}  42.8% { -webkit-transform: translateY(-100%);}  57% { -webkit-transform: translateY(0px);}  85.7% { -webkit-transform: translateY(0px);}  100% { -webkit-transform: translateY(0px);}}@keyframes slateY2 {   0% { transform: translateY(0px);}  14.3% { transform: translateY(0px);}  28.6% { transform: translateY(0px);}  42.8% { transform: translateY(-100%);}  57% { transform: translateY(0px);}  85.7% { transform: translateY(0px);}  100% { transform: translateY(0px);}}@-webkit-keyframes slateY3 {   0% { -webkit-transform: translateY(0px);}  14.3% { -webkit-transform: translateY(0px);}  28.6% { -webkit-transform: translateY(0px);}  42.8% { -webkit-transform: translateY(0px);}  57% { -webkit-transform: translateY(0px);}  85.7% { -webkit-transform: translateY(-100%);}  100% { -webkit-transform: translateY(0px);}}@keyframes slateY3 {   0% { transform: translateY(0px);}  14.3% { transform: translateY(0px);}  28.6% { transform: translateY(0px);}  42.8% { transform: translateY(0px);}  57% { transform: translateY(0px);}  85.7% { transform: translateY(-100%);}  100% { transform: translateY(0px);}}

大致的效果如下图：

至于这效果能用在哪里，我自己也不知道，我也就是瞎写写。

0 0