您的位置：首页 > Web前端 > CSS

一个简单的CSS3重复动画

2015-10-29 19:51 375 查看

随着手机性能越来越好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);}
}

大致的效果如下图：

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航