How to Make Cartoon Electronic Keyboard Animation Special Effects in CSS3

How to Make Cartoon Electronic Keyboard Animation Special Effects in CSS3: BY Michael4 Nov,2020; Tags:
CSS3 Animation Electronic Keyboard Animation

Introduction

Today I will share with you a cartoon electronic keyboard animation special effect made by pure CSS3. It is just the appearance of the electronic keyboard drawn with CSS3 and cannot pop up beautiful music, but it is implemented by pure CSS3, so it can be displayed as a gif animation.

How to Make Cartoon Electronic Keyboard Animation Special Effects in CSS3

Instructions

HTML Body Code

<div class="keyboard__buttons">
          <div class="keyboard__button"></div>
          <div class="keyboard__button"></div>
          <div class="keyboard__button"></div>
          <div class="keyboard__button"></div>
          <div class="keyboard__button"></div>
          <div class="keyboard__button"></div>
        </div>
        <div class="keyboard__led">
          <div class="keyboard__line">
            <div class="keyboard__dot"></div>
            <div class="keyboard__dot"></div>
            <div class="keyboard__dot"></div>
            <div class="keyboard__dot"></div>
            <div class="keyboard__dot"></div>
          </div>
          <div class="keyboard__line">
            <div class="keyboard__dot"></div>
            <div class="keyboard__dot"></div>
            <div class="keyboard__dot"></div>
            <div class="keyboard__dot"></div>
            <div class="keyboard__dot"></div>
          </div>
          <div class="keyboard__line">
            <div class="keyboard__dot"></div>
            <div class="keyboard__dot"></div>
            <div class="keyboard__dot"></div>
            <div class="keyboard__dot"></div>
            <div class="keyboard__dot"></div>
          </div>

Css Code

*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transform-style: preserve-3d;
}

body {
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: #B8ACFB;
}

.main {
  width: 800px;
  height: 600px;
  position: relative;
}

.face-keyboard,
.face-key {
  position: absolute;
}

.keyboard {
  position: relative;
  left: 27%;
  top: 33%;
  transform-origin: bottom left;
  transform: perspective(10000px) rotateY(-16deg) rotateX(66deg) rotateZ(37deg);
}
.keyboard__front {
  width: 800px;
  height: 220px;
  transform: rotateY(0deg) translateZ(15px);
  background-color: #3F3B43;
}

VIEW NOW