Good night...
A Pen by Krzysztof Bassowski on CodePen.
#ui | |
.sun | |
.sea | |
.wave | |
.wave | |
.wave | |
.wave | |
.wave | |
.wave |
Good night...
A Pen by Krzysztof Bassowski on CodePen.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script> |
body { | |
background: #000; | |
height: 100vh; | |
overflow: hidden; | |
} | |
#ui { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 500px; | |
height: 500px; | |
margin: -250px 0 0 -250px; | |
.sun { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 300px; | |
height: 150px; | |
margin: -150px 0 0 -150px; | |
border-radius: 300px 300px 0 0; | |
background: red; | |
z-index: 999; | |
// box-shadow: 0 0 100px rgba(255, 0, 0, 0.5); | |
filter: blur(0px) contrast(10); | |
} | |
.sea { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 500px; | |
height: 500px; | |
margin: -250px 0 0 -250px; | |
background: #000; | |
filter: blur(10px) contrast(30); | |
.wave { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 340px; | |
height: 40px; | |
margin: -20px 0 0 -170px; | |
background: red; | |
border-radius: 100%; | |
&:nth-child(2) { | |
animation: wave 2000ms infinite linear -500ms; | |
} | |
&:nth-child(3) { | |
animation: wave 2000ms infinite linear -1000ms; | |
} | |
&:nth-child(4) { | |
animation: wave 2000ms infinite linear -1500ms; | |
} | |
&:nth-child(5) { | |
animation: wave 2000ms infinite linear -1500ms; | |
} | |
&:nth-child(6) { | |
animation: wave 2000ms infinite linear -2000ms; | |
} | |
} | |
} | |
} | |
@keyframes wave { | |
0% { | |
transform: translateY(0) sclae(1) rotateZ(0); | |
} | |
50% { | |
transform: translateY(80px) scale(0.5) rotateZ(5deg); | |
} | |
100% { | |
transform: translateY(120px) scale(0) rotateZ(-40deg); | |
} | |
} |
<link href="https://fonts.googleapis.com/css?family=Dosis:800" rel="stylesheet" /> |