持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情

不知道有没有看过《洛洛历险记》的小伙伴，如果看过的，对雷霆半月斩应该是很熟悉的，对幽冥音波功可能会不那么熟悉。幽冥音波功是蓝毒兽的绝技，今天我们来做个类似的，叫做眩晕光波，看的绝对让你有眩晕感。

眩晕光波

间隔时间发出的一团不同旋转角度的正方形。

结构

因为用到了12个正方形，所以要准备12个正方形元素，如下：

<div class="container">
    <span style="--i:0"></span>
    <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>
</div>

样式

直接画出正方形的样式，然后根据变量--i来改变每个正方的旋转角度、缩放大小、边的颜色效果，如下：

.container span{
    display: inline-block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid cyan;
    filter: hue-rotate(calc(var(--i) * 30deg));
    position: absolute;
    left: 0;
    top:0;
    transform: rotate(calc(var(--i) * 30deg)) scale(calc(1 + var(--i) * 0.1));
}

然后，我们需要给它们加上动画，动画的延迟时间根据变量--i来定义的，旋转角度和缩放大小跟它也是有关的，如下：

.container span{
    animation: _animate 2s linear calc(var(--i) * 0.1s) infinite;
}

@keyframes _animate{
    100%{
        transform: rotate(calc(var(--i) * 1360deg)) scale(calc(1 + var(--i) * 1));

    }
}

效果

效果及其代码详情，如下：

总结

在给一些具有通用样式的元素添加样式的时候，我们在dom元素上定义变量并使用它可以让我们省去很多代码，但是不建议一个元素中定义太多的变量。

在这个效果中，有种花团锦簇的感觉，你也可以改变元素初始定义，让每个正方形有间隔的发散。