* {
margin:0;
padding:0;
overflow:hidden;
}
body {
width:100%;
height:100vh;
background-image:linear-gradient(to right,#ff758c 0%,#ff7eb3 100%);
display:flex;
justify-content:center;
align-items:center;
}
.container {
width:200px;
height:200px;
background:#000;
background-image:linear-gradient(-20deg,#ddd6f3 0%,#faaca8 100%,#faaca8 100%);
border-radius:50%;
box-shadow:0 0 5px rgba(0,0,0,0.15),0 2px 10px rgba(0,0,0,0.1);
display:flex;
justify-content:center;
align-items:center;
}
#app {
width:80px;
height:80px;
position:relative;
border-radius:50%;
}
.pause,.play {
width:100%;
height:100%;
cursor:pointer;
position:absolute;
}
.line {
position:absolute;
width:8px;
height:50%;
background:#000;
border-radius:10px;
transition:all 400ms cubic-bezier(0.8,0,0.33,1);
}
.pause .line_1 {
margin:25% 0;
left:28%;
}
.pause .line_2 {
margin:100% -16%;
right:45%;
transition-delay:200ms;
}
.pause.active .line {
opacity:1;
}
.pause.active .line_1 {
margin:25% 0;
left:28%;
}
.pause.active .line_2 {
margin:25% 0;
right:28%;
}
.play .line {
margin:25% 0;
}
.play .line_1 {
left:28%;
}
.play .line_2 {
height:56%;
left:60%;
transform:rotate(-55deg) translateY(-128px) translateX(16px);
transition-delay:100ms;
}
.play .line_3 {
height:56%;
left:60%;
transform:rotate(55deg) translateY(-128px) translateX(16px);
transition-delay:200ms;
}
.play.active .line {
opacity:1;
height:62%;
margin:20% 0;
}
.play.active .line_1 {
left:28%;
transform:translateY(-2px);
}
.play.active .line_2 {
height:56%;
left:63%;
transform:rotate(-55deg) translateY(-16.5px) translateX(2px);
}
.play.active .line_3 {
height:56%;
left:63%;
transform:rotate(55deg) translateY(16px) translateX(2px);
}
.support {
position:absolute;
right:10px;
bottom:10px;
padding:10px;
display:flex;
}
a {
margin:0 20px;
color:#fff;
font-size:2rem;
transition:all 400ms ease;
}
a:hover {
color:#222;
}