Created
March 30, 2024 15:49
-
-
Save codepediair/6fe39390a6a329cf7e6bfdd4fe55aa76 to your computer and use it in GitHub Desktop.
web Site Lodaing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.content | |
- for(i=0; i<2; i++) | |
.bars | |
- for(b=0; b<7; b++) | |
.bar |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--b: #E5E9F0; | |
--w: #2E3440; | |
--s: 2s; /* change speed */ | |
} | |
*, *:before, *:after { | |
box-sizing: border-box; | |
transform-style: preserve-3d; | |
} | |
body { | |
margin: 0; | |
padding: 0; | |
width: 100vw; | |
height: 100vh; | |
overflow: hidden; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
background: var(--b); | |
} | |
.content { | |
width: 50vmin; | |
height: 50vmin; | |
text-align: center; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
flex-direction: column; | |
perspective: 1000vmin; | |
} | |
.bars { | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
padding: 6.5vmin 3vmin; | |
animation: mirror1 calc(var(--s) * 2) ease 0s infinite ; | |
} | |
.bars + .bars { | |
transform: rotate(90deg) rotateX(180deg); | |
animation: mirror2 calc(var(--s) * 2) ease calc(var(--s) / 2) infinite; | |
} | |
.bar { | |
width: 44vmin; | |
height: 3vmin; | |
margin: 2vmin 0vmin; | |
background: linear-gradient(90deg, #fff0 33%, var(--w) 33% 67%, #fff0 67% 100%); | |
animation: grow var(--s) ease-in-out 0s infinite alternate; | |
background-size: 300%; | |
background-position-x: -203%; | |
} | |
@keyframes mirror1 { | |
0%, 47%, 99.99%, 100% { transform: rotate(180deg) rotateX(0deg); } | |
47.01%, 99.98% { transform: rotate(180deg) rotateX(180deg); } | |
} | |
@keyframes mirror2 { | |
0%, 47%, 99.99%, 100% { transform: rotate(90deg) rotateX(180deg); } | |
47.01%, 99.98% { transform: rotate(90deg) rotateX(0deg); } | |
} | |
@keyframes grow { | |
0%, 25% { background-position-x: -297%; } | |
45%, 55% { background-position-x: -250%; } | |
75%, 100% { background-position-x: -203%; } | |
} | |
.bar:nth-child(2) { | |
animation-delay: calc(var(--s) * -0.02); | |
} | |
.bar:nth-child(3) { | |
animation-delay: calc(var(--s) * -0.04); | |
} | |
.bar:nth-child(4) { | |
animation-delay: calc(var(--s) * -0.06); | |
} | |
.bar:nth-child(5) { | |
animation-delay: calc(var(--s) * -0.08); | |
} | |
.bar:nth-child(6) { | |
animation-delay: calc(var(--s) * -0.1); | |
} | |
.bar:nth-child(7) { | |
animation-delay: calc(var(--s) * -0.12); | |
} | |
.bars:nth-child(2) .bar:nth-child(1) { | |
animation-delay: calc(calc(var(--s) * -0.001) - calc(var(--s) / 2)); | |
} | |
.bars:nth-child(2) .bar:nth-child(2) { | |
animation-delay: calc(calc(var(--s) * -0.02) - calc(var(--s) / 2)); | |
} | |
.bars:nth-child(2) .bar:nth-child(3) { | |
animation-delay: calc(calc(var(--s) * -0.04) - calc(var(--s) / 2)); | |
} | |
.bars:nth-child(2) .bar:nth-child(4) { | |
animation-delay: calc(calc(var(--s) * -0.06) - calc(var(--s) / 2)); | |
} | |
.bars:nth-child(2) .bar:nth-child(5) { | |
animation-delay: calc(calc(var(--s) * -0.08) - calc(var(--s) / 2)); | |
} | |
.bars:nth-child(2) .bar:nth-child(6) { | |
animation-delay: calc(calc(var(--s) * -0.1) - calc(var(--s) / 2)); | |
} | |
.bars:nth-child(2) .bar:nth-child(7) { | |
animation-delay: calc(calc(var(--s) * -0.12) - calc(var(--s) / 2)); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment