MENU
renderings
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()ThisCSS function allows to perform some calculations when declaring CSS property values. It can be used in the following situations: <length>, <frequency>, <angle>, <time>,< /span> or <number>, <percentage>. This calc() function takes an expression as its parameter and the result of this expression as the value. This expression can be any combination of the following operators, a simple expression using standard operator processing rules.
W3SCHOOL
The calc() function performs calculations used as attribute values.
repeat
W3SCHOOL
The background-repeat attribute sets whether and how to repeat the background image.
By default, the background image repeats horizontally and vertically.
The background-repeat attribute defines the tiling mode of the image.
Repeat starting from the original image, which is defined by background-image and based on Background-position value placement.
MDN
The CSSrepeat() function represents a repeated segment of a track list, allowing large numbers of columns or rows that display a repeating pattern to be written in a more compact form.
This function can be used in the CSS Grid attribute grid-template-columns and grid-template-rows.