Yeah I finally did it !
A 100% pure CSS sphere :)
I'm kinda proud of myself with this pen :3
Thanks to @DeptofJeffAyer for helping me with the perspective <o/
Created
March 29, 2021 15:50
-
-
Save gennadiy-0612/b9e430983ce944b48e74e3687d6e97c9 to your computer and use it in GitHub Desktop.
Pure CSS sphere
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
.mommy | |
.daddy | |
- for (var x = 1; x < 300; x++) | |
span |
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
@import "compass"; | |
body{ | |
margin: 0; | |
display: flex; | |
height: 100vh; | |
overflow: hidden; | |
justify-content: center; | |
align-items: center; | |
background:black; | |
} | |
.mommy{ | |
width: 500px; | |
height: 500px; | |
position: relative; | |
perspective: 800px; | |
} | |
.daddy{ | |
width: 500px; | |
height: 500px; | |
transform-style: preserve-3d; | |
animation : rotate 25s infinite linear; | |
} | |
span{ | |
display: inline-block; | |
position: absolute; | |
top:50%; | |
left:50%; | |
perspective: 800px; | |
transform-style: preserve-3d; | |
width: 0; | |
height: 0; | |
&:before{ | |
content:""; | |
width: 4px; | |
height: 4px; | |
display: inline-block; | |
position: absolute; | |
top: calc(50% - 2px); | |
left: calc(50% - 2px); | |
background: currentColor; | |
color: inherit; | |
border-radius: 50%; | |
animation: invertRotate 25s infinite linear, scale 2s infinite linear; | |
box-shadow: 0 0 10px currentColor; | |
} | |
} | |
$amount : 300; | |
@for $i from 1 through $amount { | |
$theta : ($i / $amount)*120; | |
$phi : ($i / $amount) * pi(); | |
$x : 250 * sin($phi) * cos($theta); | |
$y : 250 * sin($phi) * sin($theta); | |
$z : 250 * cos($phi); | |
.mommy span:nth-child(#{$i}){ | |
transform: translate3d($x+px, $y+px, $z+px); | |
color: hsl(($i/$amount)*360,100%,50%); | |
&:before{ | |
animation-delay: 0s, -($i/$amount)*2+s; | |
} | |
} | |
} | |
@keyframes rotate{ | |
to{transform:rotateY(360deg);} | |
} | |
@keyframes invertRotate{ | |
to{transform:rotateY(-360deg);} | |
} | |
@keyframes scale{ | |
0%, 45%,55%{ box-shadow: 0 0 10px 0px currentColor;} | |
50%{ box-shadow: 0 0 10px 5px currentColor;} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment