HTML
<div class="sound-pulses">
<div class="pulse"></div>
<div class="pulse"></div>
<div class="pulse"></div>
</div>
<h1>PULSE</h1>
<div class="sound-pulses-2">
<div class="pulse"></div>
<div class="pulse"></div>
<div class="pulse"></div>
</div>
<div class="sound-pulses-3">
<div class="pulse"></div>
<div class="pulse"></div>
<div class="pulse"></div>
</div>
SCSS
@import url(https://fonts.googleapis.com/css?family=Roboto:700);
html,
body {
width: 100%;
height: 100%;
background-color: #171723;
overflow: hidden;
}
h1 {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(255,255,255,0.12);
font-size: 80px;
animation: pulse-text 5s ease-in-out infinite;
font-family: 'Roboto', sans-serif;
}
.sound-pulses {
position: absolute;
width: 800px;
bottom: -75px;
left: 0%;
margin-left: -400px;
}
.sound-pulses-2 {
position: absolute;
width: 900px;
top: 15px;
right: 0%;
margin-left: -400px;
}
.sound-pulses-3 {
position: absolute;
width: 900px;
bottom: 15px;
right: -400px;
}
.pulse {
width: 400px;
height: 400px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
margin-left: 50%;
left: -200px;
position: absolute;
bottom: -160px;
transform: scale(0.1, 0.1);
opacity: 0;
animation: pulse 3000ms ease-out infinite;
&:nth-of-type(2) {
animation-delay: 600ms;
}
&:nth-of-type(3) {
animation-delay: 1200ms;
}
}
@keyframes pulse {
0% {
transform: scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2, 1.2);
opacity: 0;
}
}
@keyframes pulse-text {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
1 Response