Here is my day 46 on the CSS Challenge. This is a hard one to figure out. I still have to learn more about animation, transformation.
Created
February 27, 2019 08:08
-
-
Save m2paulc/4c2c2b2d2003ae2a8c905afe29320da1 to your computer and use it in GitHub Desktop.
CSS Challenge Day 046
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 class="frame"> | |
<div class="center"> | |
<div class="ring ring-1"> | |
<div class="dot dot-1"></div> | |
<div class="dot dot-2"></div> | |
<div class="dot dot-3"></div> | |
<div class="dot dot-4"></div> | |
<div class="dot dot-5"></div> | |
<div class="dot dot-6"></div> | |
<div class="dot dot-7"></div> | |
<div class="dot dot-8"></div> | |
<div class="dot dot-9"></div> | |
<div class="dot dot-10"></div> | |
<div class="dot dot-11"></div> | |
<div class="dot dot-12"></div> | |
</div> | |
<div class="ring ring-2"> | |
<div class="dot dot-1"></div> | |
<div class="dot dot-2"></div> | |
<div class="dot dot-3"></div> | |
<div class="dot dot-4"></div> | |
<div class="dot dot-5"></div> | |
<div class="dot dot-6"></div> | |
<div class="dot dot-7"></div> | |
<div class="dot dot-8"></div> | |
<div class="dot dot-9"></div> | |
<div class="dot dot-10"></div> | |
<div class="dot dot-11"></div> | |
<div class="dot dot-12"></div> | |
</div> | |
<div class="ring ring-3"> | |
<div class="dot dot-1"></div> | |
<div class="dot dot-2"></div> | |
<div class="dot dot-3"></div> | |
<div class="dot dot-4"></div> | |
<div class="dot dot-5"></div> | |
<div class="dot dot-6"></div> | |
<div class="dot dot-7"></div> | |
<div class="dot dot-8"></div> | |
<div class="dot dot-9"></div> | |
<div class="dot dot-10"></div> | |
<div class="dot dot-11"></div> | |
<div class="dot dot-12"></div> | |
</div> | |
<div class="ring ring-4"> | |
<div class="dot dot-1"></div> | |
<div class="dot dot-2"></div> | |
<div class="dot dot-3"></div> | |
<div class="dot dot-4"></div> | |
<div class="dot dot-5"></div> | |
<div class="dot dot-6"></div> | |
<div class="dot dot-7"></div> | |
<div class="dot dot-8"></div> | |
<div class="dot dot-9"></div> | |
<div class="dot dot-10"></div> | |
<div class="dot dot-11"></div> | |
<div class="dot dot-12"></div> | |
</div> | |
<div class="ring ring-5"> | |
<div class="dot dot-1"></div> | |
<div class="dot dot-2"></div> | |
<div class="dot dot-3"></div> | |
<div class="dot dot-4"></div> | |
<div class="dot dot-5"></div> | |
<div class="dot dot-6"></div> | |
<div class="dot dot-7"></div> | |
<div class="dot dot-8"></div> | |
<div class="dot dot-9"></div> | |
<div class="dot dot-10"></div> | |
<div class="dot dot-11"></div> | |
<div class="dot dot-12"></div> | |
</div> | |
<div class="ring ring-6"> | |
<div class="dot dot-1"></div> | |
<div class="dot dot-2"></div> | |
<div class="dot dot-3"></div> | |
<div class="dot dot-4"></div> | |
<div class="dot dot-5"></div> | |
<div class="dot dot-6"></div> | |
<div class="dot dot-7"></div> | |
<div class="dot dot-8"></div> | |
<div class="dot dot-9"></div> | |
<div class="dot dot-10"></div> | |
<div class="dot dot-11"></div> | |
<div class="dot dot-12"></div> | |
</div> | |
</div> | |
</div> |
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
// jQuery v3.3.1 is supported |
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
<script src="https://100dayscss.com/codepen/js/jquery.min.js"></script> |
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
// delete the following line if no text is used | |
// edit the line if you wanna use other fonts | |
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,600,300); | |
// use only the available space inside the 400x400 frame | |
.frame { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 400px; | |
height: 400px; | |
margin-top: -200px; | |
margin-left: -200px; | |
border-radius: 2px; | |
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1); | |
overflow: hidden; | |
background: #0F2027; /* fallback for old browsers */ | |
background: -webkit-linear-gradient(to right top, #2C5364, #203A43, #0F2027); /* Chrome 10-25, Safari 5.1-6 */ | |
background: linear-gradient(to right top, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ | |
color: #333; | |
font-family: 'Open Sans', Helvetica, sans-serif; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.center { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%,-50%) perspective(60px); | |
} | |
.ring { | |
position: absolute; | |
width: 200px; | |
height: 200px; | |
top: -100px; | |
left: -100px; | |
&-1 { | |
-webkit-animation: expand-1 6s ease-in-out infinite alternate; | |
animation: expand-1 6s ease-in-out infinite alternate; | |
.dot { | |
opacity: 1; | |
} | |
} | |
&-2 { | |
-webkit-animation: expand-2 6s ease-in-out infinite alternate; | |
animation: expand-2 6s ease-in-out infinite alternate; | |
.dot { | |
opacity: 0.9; | |
} | |
} | |
&-3 { | |
-webkit-animation: expand-3 6s ease-in-out infinite alternate; | |
animation: expand-3 6s ease-in-out infinite alternate; | |
.dot { | |
opacity: 0.8; | |
} | |
} | |
&-4 { | |
-webkit-animation: expand-4 6s ease-in-out infinite alternate; | |
animation: expand-4 6s ease-in-out infinite alternate; | |
.dot { | |
opacity: 0.7; | |
} | |
} | |
&-5 { | |
-webkit-animation: expand-5 6s ease-in-out infinite alternate; | |
animation: expand-5 6s ease-in-out infinite alternate; | |
.dot { | |
opacity: 0.6; | |
} | |
} | |
&-6 { | |
-webkit-animation: expand-6 6s ease-in-out infinite alternate; | |
animation: expand-6 6s ease-in-out infinite alternate; | |
.dot { | |
opacity: 0.5; | |
} | |
} | |
} | |
.dot { | |
position: absolute; | |
width: 10px; | |
height: 10px; | |
top: 100px; | |
left: 100px; | |
background: #eee; | |
border-radius: 50%; | |
&-1 { | |
-webkit-transform-origin: 0 100px; | |
-webkit-transform: translate3d(0, -100px, 0) rotate(0deg); | |
transform-origin: 0 100px; | |
transform: translate3d(0, -100px, 0) rotate(0deg); | |
} | |
&-2 { | |
-webkit-transform-origin: 0 100px; | |
-webkit-transform: translate3d(0, -100px, 0) rotate(30deg); | |
transform-origin: 0 100px; | |
transform: translate3d(0, -100px, 0) rotate(30deg); | |
} | |
&-3 { | |
-webkit-transform-origin: 0 100px; | |
-webkit-transform: translate3d(0, -100px, 0) rotate(60deg); | |
transform-origin: 0 100px; | |
transform: translate3d(0, -100px, 0) rotate(60deg); | |
} | |
&-4 { | |
-webkit-transform-origin: 0 100px; | |
-webkit-transform: translate3d(0, -100px, 0) rotate(90deg); | |
transform-origin: 0 100px; | |
transform: translate3d(0, -100px, 0) rotate(90deg); | |
} | |
&-5 { | |
-webkit-transform-origin: 0 100px; | |
-webkit-transform: translate3d(0, -100px, 0) rotate(120deg); | |
transform-origin: 0 100px; | |
transform: translate3d(0, -100px, 0) rotate(120deg); | |
} | |
&-6 { | |
-webkit-transform-origin: 0 100px; | |
-webkit-transform: translate3d(0, -100px, 0) rotate(150deg); | |
transform-origin: 0 100px; | |
transform: translate3d(0, -100px, 0) rotate(150deg); | |
} | |
&-7 { | |
-webkit-transform-origin: 0 100px; | |
-webkit-transform: translate3d(0, -100px, 0) rotate(180deg); | |
transform-origin: 0 100px; | |
transform: translate3d(0, -100px, 0) rotate(180deg); | |
} | |
&-8 { | |
-webkit-transform-origin: 0 100px; | |
-webkit-transform: translate3d(0, -100px, 0) rotate(210deg); | |
transform-origin: 0 100px; | |
transform: translate3d(0, -100px, 0) rotate(210deg); | |
} | |
&-9 { | |
-webkit-transform-origin: 0 100px; | |
-webkit-transform: translate3d(0, -100px, 0) rotate(240deg); | |
transform-origin: 0 100px; | |
transform: translate3d(0, -100px, 0) rotate(240deg); | |
} | |
&-10 { | |
-webkit-transform-origin: 0 100px; | |
-webkit-transform: translate3d(0, -100px, 0) rotate(270deg); | |
transform-origin: 0 100px; | |
transform: translate3d(0, -100px, 0) rotate(270deg); | |
} | |
&-11 { | |
-webkit-transform-origin: 0 100px; | |
-webkit-transform: translate3d(0, -100px, 0) rotate(300deg); | |
transform-origin: 0 100px; | |
transform: translate3d(0, -100px, 0) rotate(300deg); | |
} | |
&-12 { | |
-webkit-transform-origin: 0 100px; | |
-webkit-transform: translate3d(0, -100px, 0) rotate(330deg); | |
transform-origin: 0 100px; | |
transform: translate3d(0, -100px, 0) rotate(330deg); | |
} | |
} | |
@keyframes expand-1 { | |
0% { | |
-webkit-transform: scale(1) rotate(0deg); | |
transform: scale(1) rotate(0deg); | |
} | |
100% { | |
-webkit-transform: scale(1) rotate(360deg); | |
transform: scale(1) rotate(360deg); | |
} | |
} | |
@keyframes expand-2 { | |
0% { | |
-webkit-transform: scale(0.850) rotate(5deg); | |
transform: scale(0.850) rotate(5deg); | |
} | |
100% { | |
-webkit-transform: scale(0.925) rotate(370deg); | |
transform: scale(0.925) rotate(370deg); | |
} | |
} | |
@keyframes expand-3 { | |
0% { | |
-webkit-transform: scale(0.725) rotate(10deg); | |
transform: scale(0.725) rotate(10deg); | |
} | |
100% { | |
-webkit-transform: scale(0.915) rotate(380deg); | |
transform: scale(0.915) rotate(380deg); | |
} | |
} | |
@keyframes expand-4 { | |
0% { | |
-webkit-transform: scale(0.650) rotate(15deg); | |
transform: scale(0.650) rotate(15deg); | |
} | |
100% { | |
-webkit-transform: scale(0.850) rotate(390deg); | |
transform: scale(0.850) rotate(390deg); | |
} | |
} | |
@keyframes expand-5 { | |
0% { | |
-webkit-transform: scale(0.550) rotate(20deg); | |
transform: scale(0.550) rotate(20deg); | |
} | |
100% { | |
-webkit-transform: scale(0.825) rotate(400deg); | |
transform: scale(0.825) rotate(400deg); | |
} | |
} | |
@keyframes expand-6 { | |
0% { | |
-webkit-transform: scale(0.4) rotate(25deg); | |
transform: scale(0.4) rotate(25deg); | |
} | |
100% { | |
-webkit-transform: scale(0.725) rotate(410deg); | |
transform: scale(0.725) rotate(410deg); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment