비전공자 개발일기

Emoji Animation 본문

HTML _CSS

Emoji Animation

HiroDaegu 2022. 6. 12. 00:50
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>EMOJI ANIMATION</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="emoji">
    <div class="face">
      <div class="eyes">
        <div class="eye"></div>
        <div class="eye"></div>
      </div>
      <div class="mouth"></div>
    </div>
  </div>
</body>
</html>

 

.face {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #D8C557;
  box-shadow: inset -3px 0 0 4px rgba(255, 102, 0, .15);
  position: relative;
}

.eye {
  width: 30px;
  height: 30px;
  background-color: #FFF;
  border-radius: 50%;
  position: absolute;
  top: 32px;
  left: 12px;
}

.eye:last-child {
  left: auto;
  right: 12px;
}

.eye::after {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation:  rolleyes 2s ease-in-out infinite;
}

.mouth {
  width: 20px;
  height: 5px;
  background-color: #884D0E;
  border-radius: 5px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes rolleyes {
  10% {
    transform: translate(-14px, -50%);
  }
  15% {
    transform: translate(-14px, -10px);
  }
  20%, 100% {
    transform: translate(-50%, -15px);
  }
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

CSS Input Text Field Animation  (0) 2022.06.14
Reavl Text Animation  (0) 2022.06.13
Heartbeat Loading Animation  (0) 2022.06.11
Lamp On Off Animation  (0) 2022.06.09
CSS Simple Animation  (0) 2022.06.08
'HTML _CSS' Related Articles more