Created
March 30, 2017 04:10
-
-
Save CodeMyUI/7d3c696070bf912e0b50367ae423a1b7 to your computer and use it in GitHub Desktop.
Background Animation
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
.hero | |
.hero__title Hello World | |
.cube | |
.cube | |
.cube | |
.cube | |
.cube | |
.cube |
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 url('https://fonts.googleapis.com/css?family=Montserrat:700'); | |
.hero { | |
background-color: #0040C1; | |
position: relative; | |
height: 100vh; | |
overflow: hidden; | |
font-family: 'Montserrat', sans-serif; | |
} | |
.hero__title { | |
color: #fff; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
font-size: 50px; | |
z-index: 1; | |
} | |
.cube { | |
position: absolute; | |
top: 80vh; | |
left: 45vw; | |
width: 10px; | |
height: 10px; | |
border: solid 1px darken(#0040C1, 8%); | |
transform-origin: top left; | |
transform: scale(0) rotate(0deg) translate(-50%, -50%); | |
animation: cube 12s ease-in forwards infinite; | |
&:nth-child(2n) { | |
border-color: lighten(#0040C1, 10%); | |
} | |
&:nth-child(2) { | |
animation-delay: 2s; | |
left: 25vw; | |
top: 40vh; | |
} | |
&:nth-child(3) { | |
animation-delay: 4s; | |
left: 75vw; | |
top: 50vh; | |
} | |
&:nth-child(4) { | |
animation-delay: 6s; | |
left: 90vw; | |
top: 10vh; | |
} | |
&:nth-child(5) { | |
animation-delay: 8s; | |
left: 10vw; | |
top: 85vh; | |
} | |
&:nth-child(6) { | |
animation-delay: 10s; | |
left: 50vw; | |
top: 10vh; | |
} | |
} | |
@keyframes cube { | |
from { | |
transform: scale(0) rotate(0deg) translate(-50%, -50%); | |
opacity: 1; | |
} | |
to { | |
transform: scale(20) rotate(960deg) translate(-50%, -50%); | |
opacity: 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment