一个css3 DNA 效果

最新推荐文章于 2022-08-15 07:26:10 发布

weixin_30244889

最新推荐文章于 2022-08-15 07:26:10 发布

阅读量137

点赞数

原文链接：http://www.cnblogs.com/dhsz/p/6860920.html

版权

本文介绍了一个使用CSS实现的沿Y轴无限旋转的动画效果。通过定义关键帧动画并设置元素的旋转属性，使得一系列创建的div元素能够形成连续旋转的视觉效果。每个div元素还具有不同的延迟时间，以确保整体动画的流畅性和一致性。

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

这个效果就是不断沿 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>