Lamp On Off Animation

HTML _CSS

Lamp On Off Animation

HiroDaegu 2022. 6. 9. 00:06

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>LAMP ON OFF ANIMATION</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js' integrity='sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==' crossorigin='anonymous'></script>
</head>
<body>
  <div class="lamp js-turnoff-btn">
    <div class="lamp-item lamp-top"></div>
    <div class="lamp-item lamp-middle"></div>
    <div class="lamp-item lamp-bottom"></div>
    <div class="lamp-item lamp-light open"></div>
  </div>
</body>
</html>

body {
  background-color: #2598EB;
}

.lamp-item {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.lamp-top {
  background-color: #2D2D2D;
  width: 10px;
  height: 100px;
  top: 0;
}

.lamp-middle {
  background-color: #2D2D2D;
  border-radius: 50px 50px 0 0;
  width: 50px;
  height: 30px;
  top: 100px;
}

.lamp-bottom {
  background-color: #2D2D2D;
  border-radius: 100px 100px 0 0;
  width: 150px;
  height: 80px;
  top: 120px;
  cursor: pointer;
}

.lamp-light.open {
  background-color: #FFF;
  clip-path: polygon(40% 0, 60% 0, 80% 100%, 20% 100%);
  width: 700px;
  height: 450px;
  position: absolute;
  top: 200px;
}

$("body").on("click", '.js-turnoff-btn', function() {
  $(".lamp-light").toggleClass('open');
})

728x90

LIST