Created
April 1, 2023 20:11
-
-
Save fastndead/d533410ff030558ef80688a916bfea2d to your computer and use it in GitHub Desktop.
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
<div id='spinner'> | |
<style> | |
.spinner-container { | |
position: relative; | |
margin-top: 8rem; | |
} | |
@media screen and (min-width: 1536px) { | |
.spinner-container { | |
margin-top: 18rem; | |
} | |
} | |
.card { | |
/* positioning */ | |
position: absolute; | |
top: 0; | |
right: 50%; | |
transform: translate(50%, 0); | |
/* appearance */ | |
width: 103px; | |
height: 166px; | |
background: #ccdaff; | |
border: 1px solid #7893dc; | |
border-radius: 8px; | |
} | |
.skewed { | |
transform: translate(calc(50% + 15px), 0) rotate(10deg); | |
z-index: -10; | |
} | |
.skewed-2 { | |
transform: translate(calc(50% - 15px), 0) rotate(-10deg); | |
z-index: -10; | |
} | |
.skewed-3 { | |
transform: translate(calc(50% - 35px), 0) rotate(-25deg); | |
z-index: -1000; | |
} | |
.skewed-4 { | |
transform: translate(calc(50% + 35px), 0) rotate(25deg); | |
z-index: -1000; | |
} | |
.animated { | |
animation: 1s ease-in-out 0s infinite shuffle; | |
z-index: 1000; | |
} | |
.animated-alternate { | |
animation: 1s ease-in-out 0.5s infinite shuffle-alternate; | |
z-index: 1000; | |
} | |
@keyframes shuffle-alternate { | |
0% { | |
transform: translate(50%, 0); | |
} | |
50% { | |
transform: translate(calc(50% - 220px), -135px) | |
rotate(-45deg); | |
z-index: 1000; | |
} | |
60% { | |
z-index: -1000; | |
} | |
100% { | |
transform: translate(50%, 0); | |
z-index: -1000; | |
} | |
} | |
@keyframes shuffle { | |
0% { | |
transform: translate(50%, 0); | |
} | |
50% { | |
transform: translate(calc(50% + 220px), -135px) | |
rotate(45deg); | |
z-index: 1000; | |
} | |
60% { | |
z-index: -1000; | |
} | |
100% { | |
transform: translate(50%, 0); | |
z-index: -1000; | |
} | |
} | |
</style> | |
<div class='spinner-container'> | |
<div class="card animated"></div> | |
<div class="card animated-alternate"></div> | |
<div class="card"></div> | |
<div class="card"></div> | |
<div class="card skewed"></div> | |
<div class="card skewed-2"></div> | |
<div class="card skewed-3"></div> | |
<div class="card skewed-4"></div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment