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。