CSS + HTML loop-circle

用户1401108358171
190 阅读4分钟

CSS + HTML loop-circle 动画

1、HTML结构

 <body>
    <div class="cont-box">
        <!-- 左圆 -->
        <div class="loop-circle">
            <span style="--i:1"></span>
            <span style="--i:2"></span>
            <span style="--i:3"></span>
            <span style="--i:4"></span>
            <span style="--i:5"></span>
            <span style="--i:6"></span>
            <span style="--i:7"></span>
            <span style="--i:8"></span>
            <span style="--i:9"></span>
            <span style="--i:10"></span>
            <span style="--i:11"></span>
            <span style="--i:12"></span>
        </div>
        <!-- 右圆 内部元素和左园一样 -->
        <div class="loop-circle">
        </div>
    </div>
</body>

该dom树包含一类名为 cont-box 的黑色长方形, 长方形内有二个类名 loop-circle 的正方形，正方形内包含若干span元素。元素个数选取满足：90%(n/4)==090 \% (n/4) == 0 时，css样式设置不会丢失精度，否则需要书写额外的css调整样式。

注意： 选择span元素的个数会影响最终展示效果，css部分样式和动画都依照span元素个数设定。该案例选取12个span元素作为动画闪动点，原因在后续设置css样式中解释。

2、CSS样式

  • 页面整体布局
  • 均匀转动( loop-circle) 内部span元素组成二个完整圆
  • 转动 + 位移 第二个（ loop-circle）使二圆重叠

span 元素布局：

span在父元素相对定位下进行绝对定位堆叠一起，设置span ::before伪元素为小球样式。

 .cont-box .loop-circle {
        /*在span 绝对定位后，所有span元素重叠*/
        position: relative;
        width: 12vw;
        height: 12vw;
    }
    
   .cont-box .loop-circle span {
       /*元素重叠*/
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*后续取消该样式 ， 便于展示旋转过程*/
        border: 1px solid white;
    }
    
      .cont-box .loop-circle span::before {
        content: '';
        position: absolute;
        right: 0;
        /*盒子高度的一半 -  伪元素高度一半 垂直剧中*/
        top: calc(6vw - 0.5vw);
        width: 1vw;
        height: 1vw;
        /*选取一个随机色*/
        background-color: rgb(158, 228, 122);
        border-radius: 0.5vw;
    }

image.png

根据span元素中style样式变量--i,旋转span元素,带动小球旋转组成完整圆。单位下旋转角度计算方式： rotateDeg=360/span元素个数rotateDeg = 360 / span元素个数 。建议span元素个数满足：90%(n/4)==090 \% (n/4) == 0 。

var() - CSS（层叠样式表）

    .cont-box .loop-circle span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid white;
        /* 根据--i的不同旋转各自角度 */
        transform: rotate(calc(30deg * var(--i)));
    }

image.png

loop-circle 圆布局：

二圆重叠 让第二个圆左移一个小圆位置

.cont-box .loop-circle:last-of-type {
    /* 定位 让二圆重叠 */
    position: relative;
    left: -1vw;
}

image.png

3、CSS动画

  • 小圆闪动衔接动画
  • 颜色自变动画

小圆闪动衔接动画

使用animation动画 + scale缩放

.cont-box .loop-circle span::before {
    /* 阴影效果设置 */
    box-shadow: 0 0 10px rgb(158, 228, 122), 0 0 20px rgb(158, 228, 122), 0 0 40px rgb(158, 228, 122), 0 0 60px rgb(158, 228, 122), 0 0 80px rgb(158, 228, 122), 0 0 100px rgb(158, 228, 122);
    transform: scale(0.2);
    /*闪动动画*/
    animation: loopCirles 3s linear infinite;
}


@keyframes loopCirles {
    /* 自定义动画样式 缩放*/
    0% {
        transform: scale(1)
    }
    100% {
        transform: scale(0.2)
    }
}

animate_scale.webp

根据var(--i) 给每个小球添加不同延迟

.cont-box .loop-circle span::before {
    /* 阴影效果设置 */
    box-shadow: 0 0 10px rgb(158, 228, 122), 0 0 20px rgb(158, 228, 122), 0 0 40px rgb(158, 228, 122), 0 0 60px rgb(158, 228, 122), 0 0 80px rgb(158, 228, 122), 0 0 100px rgb(158, 228, 122);
    /*初始缩放大小*/
    transform: scale(0.2);
    /*闪动动画*/
    animation: loopCirles 3s linear infinite;
    /*var(--i)添加对应延迟*/
    animation-delay: calc(0.125s * var(--i)); 
}

animate_delay.webp

旋转第二个loop-circle元素，让二个大圆起始动画产生交叉点


.cont-box .loop-circle:last-of-type {
    /* 定位 让二圆重叠 */
    position: relative;
    left: -1vw;
     /*旋转该圆产生交叉点 */
    transform: rotate(-180deg);
}

animate_cross.webp

调整第二个圆延迟，提前执行动画，实现首尾交叉

.cont-box .loop-circle:last-of-type span::before {
    /* 延迟为复数 提前开启动画 相当于让动画方向旋转并且延迟一个周期 */
    animation-delay: calc(-0.125s * var(--i)); 
    /* 相反的方向不适用 */
    /* animation-direction: reverse; */
}

animate_reverse.webp

颜色滤镜

hue-rotate(deg) ：采用给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。最终效果顶峰见。 CSS3 filter(滤镜) 属性

.cont-box {
    /* 使用纯黑色filter不生效，颜色不偏移 */
    background-color: black;
    /* background-color: rgb(65, 58, 58); */
    animation: loopColor 3s linear infinite;
}

@keyframes loopColor {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

注意：这里的颜色滤镜对颜色边界值 rgb（255,255,255） 和 rgb(0,0,0) 不生效。延迟时间： delayTime=动画周期/2/小球个数delayTime = 动画周期 / 2 / 小球个数。

文章顶部链接为该案例作如果发现文件存在错误或其他需要改进的地方，欢迎留言，不胜感激。\color{white}{文章顶部链接为该案例作如果发现文件存在错误或其他需要改进的地方，欢迎留言，不胜感激。}

文章顶部链接为该案例作如果发现文件存在错误或其他需要改进的地方，欢迎留言，不胜感激。\color{#666}{文章顶部链接为该案例作如果发现文件存在错误或其他需要改进的地方，欢迎留言，不胜感激。}

avatar
文章
阅读
粉丝