zoukankan      html  css  js  c++  java
  • 一个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{
        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>
  • 相关阅读:
    excel的导入导出
    mybatis常用sql
    java中和时间相关的类,方法
    <resultMap>
    项目启动报的错
    多表查询
    file的一些方法
    AOV网络与AOE网络
    封装解封装过程
    以太网交换机
  • 原文地址:https://www.cnblogs.com/dhsz/p/6860920.html
Copyright © 2011-2022 走看看