비전공자 개발일기

Lock Animation 본문

Javascript

Lock Animation

HiroDaegu 2022. 5. 5. 00:28
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>Lock Animation</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <div class="lock">
    <span class="key"></span>
  </div>
</body>
</html>
body {
  background-color: #000;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lock {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 5px;
  border: 2px solid #fff;
  transition: all .8s;
  cursor: pointer;
}

.lock::after {
  position: absolute;
  content: ' ';
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 5px solid #1a1a1a;
  top: -25px;
  left: 5px;
  z-index: -1;
  transition: all .8s;
}

.lock .key {
  width: 16px;
  height: 8px;
  background-color: #1a1a1a;
  margin: 10px auto 0;
  border-radius: 15px;
  transition: all .8s;
}

.lock::before {
  position: absolute;
  content: 'Lock';
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  left: 12.5px;
  top: 5px;
}

.unlock {
  border: 2px solid #00d455 !important;
}

.unlock::after {
  border: 5px solid #00d455;
  border-right: 5px solid transparent;
}

.unlock .key {
  transform: rotate(-90deg);
  background-color: #00d455;
}

.unlock::before {
  content: 'Unlock';
  left: 4px;
  color: #00d455;
}
let lock = document.querySelector(".lock");

lock.addEventListener("click", () => {
  lock.classList.toggle("unlock")
})
728x90
LIST

'Javascript' 카테고리의 다른 글

Draggable DIV  (0) 2022.05.12
Animated Submit BUTTON  (0) 2022.05.10
Alarm Application  (0) 2022.05.02
3D Card  (0) 2022.04.27
Circle Loading Tape  (0) 2022.04.24
'Javascript' Related Articles more