web前端之正弦波浪动功能、repeat、calc

---

效果图

---

---

html

<div class="grid">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
</div>

---

style

body {
    margin: 0;
    height: 100vh;
    display: grid;
    place-items: center;
    background-color: #050505;
}

.grid {
    height: 230px;
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-column-gap: 14px;
}

.line {
    position: relative;
    width: 7px;
    height: 100%;
}

.line::before,
.line::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 7px;
    border-radius: 7px;
    background-color: #3b44d1;
}

.line::after {
    bottom: 0;
    background-color: #dc5245;
    height: calc(100% - 20px);
    animation: second-line ease-in-out 4s var(--delay) infinite alternate;
}

.line {
    --delay: -0.1s;
}

@keyframes second-line {
    50% {
        height: 7px;
    }
    100% {
        background-color: #5d38ee;
    }
}

.line::before {
    animation: first-line ease-in-out 4s var(--delay) infinite alternate;
}

@keyframes first-line {
    50% {
        height: calc(100% - 13px);
    }
    100% {
        background-color: #46f443;
    }
}

.line:nth-child(1) {
    --delay: -0.1s;
}

.line:nth-child(2) {
    --delay: -0.2s;
}

.line:nth-child(3) {
    --delay: -0.3s;
}

.line:nth-child(4) {
    --delay: -0.4s;
}

.line:nth-child(5) {
    --delay: -0.5s;
}

.line:nth-child(6) {
    --delay: -0.6s;
}

.line:nth-child(7) {
    --delay: -0.7s;
}

.line:nth-child(8) {
    --delay: -0.8s;
}

.line:nth-child(9) {
    --delay: -0.9s;
}

.line:nth-child(10) {
    --delay: -1s;
}

.line:nth-child(11) {
    --delay: -1.1s;
}

.line:nth-child(12) {
    --delay: -1.2s;
}

.line:nth-child(13) {
    --delay: -1.3s;
}

.line:nth-child(14) {
    --delay: -1.4s;
}

.line:nth-child(15) {
    --delay: -1.5s;
}

.line:nth-child(16) {
    --delay: -1.6s;
}

.line:nth-child(17) {
    --delay: -1.7s;
}

.line:nth-child(18) {
    --delay: -1.8s;
}

.line:nth-child(19) {
    --delay: -1.9s;
}

.line:nth-child(20) {
    --delay: -2s;
}

---

calc

MDN

calc()此CSS函数允许在声明CSS属性值时执行一些计算。它可以用在如下场合：<length>、<frequency>、<angle>、<time>、<percentage>、<number>或<integer>。
此calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。

---

W3SCHOOL

calc()函数执行用作属性值的计算。

---

repeat

W3SCHOOL

background-repeat属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。
background-repeat属性定义了图像的平铺模式。
从原图像开始重复，原图像由background-image定义，并根据background-position的值放置。

---

MDN

CSSrepeat()函数表示轨道列表的重复片段，允许以更紧凑的形式写入大量显示重复模式的列或行。
该函数可以用于CSS Grid属性中grid-template-columns和grid-template-rows。