아임웹 코드 - 스위치 버튼으로 불을 켰다 끌 수 있는 애니메이션

시연 동영상 보기

<div class="switchcontainer">

<div class="switch"></div>

<div class="turnon">

  <img class="turonimg" src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/848326fcfafd8.png">

</div>

  <div class="turnoff">

  <img class="turoffimg" src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/3a2a402fe100a.png">

</div>

</div>

<style>

  .switchcontainer{

  position:relative;

  width:50%;

  height: 400px;

  }

  .turnon{

 position:absolute;

  width:100%;

    height:100%;

    display:none;

  }  

  .turnoff{

 position:absolute;

  width:100%;

    height:100%;

  }

  .turoffimg{

    width:100%;

    height:100%;

  }

  .turonimg{

  width:100%;

    height:100%;

  }

*,

*::before,

*::after {

  box-sizing: border-box;

}

.switch {

  position: absolute;

  left: 50%;

  transform: translate(-50%, -50%);

  transition: all 0.1s ease-out;

  width: 97px;

  height: 97px;

  z-index: 1;

  border-radius: 50%;

  background: linear-gradient(to top, #eeeeee, #e6e1df);

  box-shadow: inset 0 2px 3px rgba(91, 85, 86, 0.37);

  cursor: pointer;

}

.switch::before {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  transition: all 0.1s ease-out;

  content: "";

  width: 88px;

  height: 88px;

  z-index: 2;

  background: linear-gradient(to bottom, #f5f5f5, #e7e7e7);

  border-radius: 50%;

  box-shadow: 0 2px 6px rgba(83, 73, 74, 0.44), 0 0 0 1px rgba(41, 41, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.77);

}

.switch::after {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  transition: all 0.1s ease-out;

  content: "OFF";

  z-index: 3;

  font-size: 16px;

  color: #73706b;

  text-shadow: 0 2px 0 white;

}

.switch:hover::before {

  background: linear-gradient(to bottom, #e7e7e7, #f5f5f5);

}

.switch.active {

  width: 117px;

  height: 117px;

  background: linear-gradient(50deg, #ffca17 0%, #fe8800 31%, #ff5a24 52%, #f81e37 76%, #f61439 100%);

  box-shadow: inset 0 0 7px rgba(87, 0, 10, 0.57);

  transform-origin: center;

}

.switch.active::before {

  background: linear-gradient(to bottom, #dbcfca, #fcf6f0);

  box-shadow: 0 2px 8px rgba(183, 0, 15, 0.44), 0 0 0 1px rgba(41, 41, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.77);

}

.switch.active::after {

  content: "ON";

  color: #f72735;

}

@keyframes loop {

  0% {

    transform: rotate(0) translate(-50%, -50%);

  }

  100% {

    transform: rotate(360deg) translate(-50%, -50%);

  }

}

</style>

<script>

  $(document).ready(function() {

    if ($('.switch').hasClass('active')) {

      $('.turnon').css('display', 'block');

      $('.turnoff').css('display', 'none');

    } else {

      $('.turnon').css('display', 'none');

      $('.turnoff').css('display', 'block');

    }

    $('.switch').click(function() {

      $(this).toggleClass('active');

      if ($(this).hasClass('active')) {

        $('.turnon').css('display', 'block');

        $('.turnoff').css('display', 'none');

      } else {

        $('.turnon').css('display', 'none');

        $('.turnoff').css('display', 'block');

      }

    });

  });

</script>