<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CORE music ::Happy-Csser</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="outer">
<div class="c"></div>
<div class="r"></div>
<div class="e"></div>
<div class="o"></div>
</div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/yuanyu/core-music-happy-csser-RjXqBV */
body {
height: 100vh;
margin: 0;
border: 0;
display: flex;
justify-content: center;
align-items: center;
}
.outer {
font-size: 100px;
width: 4.6em;
height: 1em;
border: 1px solid red;
position: relative;
}
.c {
position: absolute;
background-color: transparent;
height: .5em;
width: .5em;
border: 0.25em solid black;
border-radius: 50%;
}
.o {
position: absolute;
top: -.575em;
left: .725em;
height: .75em;
width: .75em;
background-color: black;
border-radius: 50%;
border: .7em solid white;
-webkit-animation: scaleDown .4s ease-in-out;
animation: scaleDown .4s ease-in-out;
}
.o::before {
content: '';
display: block;
height: .25em;
width: .25em;
background-color: white;
position: absolute;
left: .25em;
top: .25em;
border-radius: inherit;
}
.r {
position: absolute;
left: 2.75em;
height: 1em;
width: .25em;
background-color: black;
}
.r::before {
position: absolute;
content: '';
height: 1em;
width: .25em;
left: .375em;
-webkit-transform: skew(30deg);
transform: skew(30deg);
background-color: black;
}
.r::after {
position: absolute;
content: '';
height: .25em;
width: .25em;
background-color: white;
border: 0.25em solid black;
border-radius: 0 50% 50% 0;
}
.e {
position: absolute;
left: 3.85em;
height: 1em;
width: .25em;
background-color: black;
}
.e::before {
content: '';
display: block;
position: absolute;
height: .25em;
width: .75em;
left: 0em;
background-color: black;
box-shadow: -.04em 0.35em 0em -.04em black, 0em 0.75em black;
}
@-webkit-keyframes border-change {
0% {
border-width: 2em;
}
100% {
border-width: .378em;
}
}
@keyframes border-change {
0% {
border-width: 2em;
}
100% {
border-width: .378em;
}
}
@-webkit-keyframes scaleDown {
0% {
opacity: 0;
-webkit-transform: scale(4);
transform: scale(4);
}
50% {
opacity: 1;
-webkit-transform: scale(3);
transform: scale(3);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes scaleDown {
0% {
opacity: 0;
-webkit-transform: scale(4);
transform: scale(4);
}
50% {
opacity: 1;
-webkit-transform: scale(3);
transform: scale(3);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}