首页 > 代码库 > 一个css3 DNA 效果
一个css3 DNA 效果
这个效果就是 不断沿 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 效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。