پیشنمایش زنده
کد HTML
<div class="stage">
<div class="grid">
<div class="strip">
<div class="tip delay-18"></div>
<div class="tip reverse delay-17"></div>
<div class="tip delay-16"></div>
<div class="tip reverse delay-15"></div>
<div class="tip delay-14"></div>
</div>
<div class="strip">
<div class="tip delay-01"></div>
<div class="tip reverse delay-02"></div>
<div class="tip delay-f"></div>
<div class="tip reverse delay-e"></div>
<div class="tip delay-d"></div>
<div class="tip reverse delay-13"></div>
<div class="tip delay-12"></div>
</div>
<div class="strip">
<div class="tip reverse delay-03"></div>
<div class="tip delay-04"></div>
<div class="tip reverse delay-a"></div>
<div class="tip delay-b"></div>
<div class="tip reverse delay-c"></div>
<div class="tip delay-11"></div>
<div class="tip reverse delay-10"></div>
</div>
<div class="strip">
<div class="tip reverse delay-05"></div>
<div class="tip delay-06"></div>
<div class="tip reverse delay-07"></div>
<div class="tip delay-08"></div>
<div class="tip reverse delay-09"></div>
</div>
</div>
</div>
کد CSS
.stage {
display: flex;
align-items: center;
justify-content: center;
}
.grid {
display: flex;
flex-direction: column;
align-items: center;
}
.strip {
display: flex;
}
.tip {
width: 0;
height: 0;
margin: 0 -6px;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 22px solid #48fd00;
filter: drop-shadow(0 0 18px #65fc0d);
animation: pulse 1s infinite;
}
.tip.reverse {
transform: rotate(180deg);
}
.delay-01 {
animation-delay: -0.05s;
}
.delay-02 {
animation-delay: -0.1s;
}
.delay-03 {
animation-delay: -0.15s;
}
.delay-04 {
animation-delay: -0.2s;
}
.delay-05 {
animation-delay: -0.25s;
}
.delay-06 {
animation-delay: -0.3s;
}
.delay-07 {
animation-delay: -0.35s;
}
.delay-08 {
animation-delay: -0.4s;
}
.delay-09 {
animation-delay: -0.45s;
}
.delay-10 {
animation-delay: -0.5s;
}
.delay-11 {
animation-delay: -0.55s;
}
.delay-12 {
animation-delay: -0.6s;
}
.delay-13 {
animation-delay: -0.65s;
}
.delay-14 {
animation-delay: -0.7s;
}
.delay-15 {
animation-delay: -0.75s;
}
.delay-16 {
animation-delay: -0.8s;
}
.delay-17 {
animation-delay: -0.85s;
}
.delay-18 {
animation-delay: -0.9s;
}
.delay-19 {
animation-delay: -0.95s;
}
.delay-20 {
animation-delay: -1s;
}
.delay-a {
animation-delay: -0.17s;
}
.delay-b {
animation-delay: -0.33s;
}
.delay-c {
animation-delay: -0.5s;
}
.delay-d {
animation-delay: -0.67s;
}
.delay-e {
animation-delay: -0.83s;
}
.delay-f {
animation-delay: -1s;
}
@keyframes pulse {
0% {
opacity: 0.1;
}
30% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}