비전공자 개발일기

Heartbeat Loading Animation 본문

HTML _CSS

Heartbeat Loading Animation

HiroDaegu 2022. 6. 11. 02:02
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>HEARTBEAT LOADER ANIMATION</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="heart-loader"></div>
</body>
</html>
body {
  height: 100vh;
  background-color: #151515;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}

.heart-loader {
  background-color: #F44336;
  width: 50px;
  height: 50px;
  position: relative;
  transform: rotate(45deg);
  animation: pulsate 1s infinite;
}

.heart-loader::before, .heart-loader::after {
  position: absolute;
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #F44336;
  border-radius: 50%;
}

.heart-loader::before {
  top: 0;
  left: -25px;
}

.heart-loader::after {
  top: -25px;
  left: 0;
}

@keyframes pulsate {
  0% {
    transform: rotate(45deg) scale(.8);
  }
  5% {
    transform: rotate(45deg) scale(.9);
  }
  10% {
    transform: rotate(45deg) scale(.8);
  }
  15% {
    transform: rotate(45deg) scale(1);
  }
  50% {
    transform: rotate(45deg) scale(.8);
  }
  100% {
    transform: rotate(45deg) scale(.8);
  }
}
728x90
LIST

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

Reavl Text Animation  (0) 2022.06.13
Emoji Animation  (0) 2022.06.12
Lamp On Off Animation  (0) 2022.06.09
CSS Simple Animation  (0) 2022.06.08
GROWING LEON APPLE ICON  (0) 2022.06.06
'HTML _CSS' Related Articles more