最新公告
  • 欢迎您光临网站无忧模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 纯 html + css 实现毛毛虫

    正文概述 掘金(iwantmytea)   2021-07-21   475

    毛毛虫

    纯 html + css 实现毛毛虫

    分析

    1. 毛毛虫是由一个个的圆从里到外组成。
    2. 最里面的圆距离中心位置最近,最外层的圆距离中心位置最远。
    3. 圆的旋转速度是一样的,只是开始旋转的时间(或者位置)不一样。

    初始时

    纯 html + css 实现毛毛虫

    然后从左到右依次开始绕着圆心旋转

    纯 html + css 实现毛毛虫

    纯 html + css 实现毛毛虫

    代码 - 以两个圆为例

    <div>
        <div class="rect">
            <!-- 第一个圆 -->
            <div class="circle"></div>
        </div>
        <div class="rect">
            <!-- 第二个圆 -->
            <div class="circle"></div>
        </div>
    </div>
    
    @keyframes rotate {
        0% {
            transform: rotate(0);
        }
    
        100% {
            transform: rotate(1turn);
        }
    }
    .rect {
        width: 500px;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
    }
    .circle {
        /* 圆的默认样式 */
        width: 100px;
        height: 100px;
        border-radius: 50%;
        box-shadow: 2px 2px 5px 5px rgba(0, 0, 0, 0.1);
    }
    /* 调整第一个圆旋转的开始时间和初始位置 */
    .rect:nth-child(1) {
        /* 旋转延迟 0 */
        animation: rotate 3s 0s linear infinite;
    }
    .rect:nth-child(1) .circle {
        /* 相对于圆心的偏移量 10px */
        transform: translateX(10px);
        background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    }
    
    /* 调整第二个圆旋转的开始时间和初始位置 */
    .rect:nth-child(2) {
        /* 旋转延迟 250ms */
        animation: rotate 3s 250ms linear infinite;
    }
    .rect:nth-child(2) .circle {
        /* 相对圆心偏移 20px */
        transform: translateX(20px);
        background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
    }
    

    两个圆时的情况

    纯 html + css 实现毛毛虫

    接下来只要照着上面的规则加圆(越往外层的圆偏移量越大, 动画开始时间越晚),就可以达到毛毛虫的效果。

    完整代码

    jsbin.com/xanalug/edi…


    下载网 » 纯 html + css 实现毛毛虫

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元