码迷,mamicode.com
首页 > Web开发 > 详细

一个css3 DNA 效果

时间:2017-05-16 14:41:42      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:init   rip   frame   rom   logs   bsp   node   transform   style   

 

这个效果就是 不断沿 Y 轴旋转

<div id="container"></div>
<style>
body{
    background:black;
}
#container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
#container div{
    width:120px;
    height:40px;
    margin-bottom:10px;
    background:none;
//画DNA border
-top:2px solid pink; border-bottom:2px solid red; border-left:60px solid #ffff00; border-right:60px solid #00ffff;
//4秒旋转一次 animation:rotate 4s linear infinite; } @keyframes rotate{ from{ transform:rotateY(0deg); } to{ transform:rotateY(360deg); } }
</style> <script> var node = document.createElement(‘div‘); for (var i = 0; i < 20; i++) { var copy = node.cloneNode(true); copy.style.animationDelay = -i * 0.3 + ‘s‘; container.appendChild(copy); } </script>

 

一个css3 DNA 效果

标签:init   rip   frame   rom   logs   bsp   node   transform   style   

原文地址:http://www.cnblogs.com/dhsz/p/6860920.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!