비전공자 개발일기

Edge Motion 본문

HTML _CSS

Edge Motion

HiroDaegu 2022. 4. 20. 00:43
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>Edge Motion</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="motion">
      <div class="circle"></div>
    </div>
</body>
</html>
.motion {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 100px;
  height: 100px;
  border: 1px solid #6667ab;
  position: absolute;
  border-radius: 50%;
  animation: circleAnimation 2s linear infinite;
}

.circle::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #04fc43;
  box-shadow: 0 0 20px #04fc43, 0 0 60px #04fc43;
}

@keyframes circleAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
728x90
LIST

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

Text Hover Effect & Shake On Invaild Input  (0) 2022.04.23
Shadow BTN  (0) 2022.04.22
Link Hover Animation  (0) 2022.04.19
TEXT OVERFLOW & LOADING ANIMATION  (0) 2022.04.17
filter() Animation  (0) 2022.04.16
'HTML _CSS' Related Articles more