阅读 595

纯 html + css 实现毛毛虫

毛毛虫

ZtvEiHCiQ4.gif

分析

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

初始时

WXWorkCapture_16267658011830.png

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

WXWorkCapture_16267662815039.png

WXWorkCapture_16267662762275.png

代码 - 以两个圆为例

<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%);
}
复制代码

两个圆时的情况

M6Lotr7Gtc.gif

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

完整代码

jsbin.com/xanalug/edi…

文章分类
前端
文章标签