CORE music ::Happy-Csser

In this example below you will see how to do a CORE music ::Happy-Csser with some HTML / CSS and Javascript

https://dribbble.com/shots/3957788-CORE-music-logo-design

Thumbnail
This awesome code was written by yuanyu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright yuanyu ©
  • HTML
  • CSS
<!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);
  }
}

Comments