花趣站长网代码在线运行工具

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CUTE TOGGLE BUTTON</title>
  <style>
  * {margin: 0;padding: 0;box-sizing:border-box;}

body {font-family: 'Fredoka One', cursive;}

.bg {
  height: 100vh;
  width: 100%;
  transition: 0.5s ease-in;
}

.bg-on-state {
  background-color: #222;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.toggle-letters {
  margin: 0 10px;
  font-weight: 100;
  font-size: 3.5rem;
  transition: 0.5s 1.6s ease-in;
  color: #222;
}

.letter-on-state {
  color: #fff;
  text-shadow: 0 0 8px white;
}

.letter-on-state:nth-child(3) {
  animation-name: e;
  animation-duration: 1s;
  animation-delay: 2.5s;
  animation-timing-function: ease-in;
}

@keyframes e{
  10% {
    color: #222;
    text-shadow: 0 0 0 transparent;
  }
  20% {
    color: white;
    text-shadow: 0 0 8px white;
  }
  30% {
    color: #222;
    text-shadow: 0 0 0 transparent;
  }
  40% {
    color: white;
    text-shadow: 0 0 8px white;
  }
  50% {
    color: #222;
    text-shadow: 0 0 0 transparent;
  }
  60% {
    color: #222;
    text-shadow: 0 0 0 transparent;
  }
  70% {
    color: #222;
    text-shadow: 0 0 0 transparent;
  }
  80% {
    color: white;
    text-shadow: 0 0 8px white;
  }
  90% {
    color: #222;
    text-shadow: 0 0 0 transparent;
  }
  100% {
    color: white;
    text-shadow: 0 0 8px white;
  }
}

.toggle-base {
  height: 90px;
  width: 170px;
  background-color: transparent;
  
  border-radius: 100px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 5px solid #222;
}

.toggle-handle {
  height: 60px;
  width: 60px;
  background-color: transparent;
  border-radius: 50%;
  transform: translateX(0);
  border: 5px solid black;
  transition: all 500ms cubic-bezier(0.730, -0.305, 0.350, 1.650);
}

.toggle-handle-on-state {
  border: 5px solid white;  
  box-shadow: 0 0 8px white,
              inset 0 0 8px white;
  transform: translateX(80px);
}
 </style>
</head>
<body>

<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<div class="bg">
  <div class="container">
  <h1 class="toggle-letters">T</h1>
  <div class="toggle-base">
    <div class="toggle-handle">
    </div>
  </div>
  <h1 class="toggle-letters">G</h1>
  <h1 class="toggle-letters">G</h1>
  <h1 class="toggle-letters">L</h1>
  <h1 class="toggle-letters">E</h1>
</div>
</div>

  <script>
  const bg = document.querySelector('.bg');
const letters = document.querySelectorAll('.container > h1');
const toggleHandle = document.querySelector('.toggle-handle');

toggleHandle.addEventListener('click', () => {
  bg.classList.toggle('bg-on-state');
  letters.forEach(letter => {
    letter.classList.toggle('letter-on-state');
  });
  toggleHandle.classList.toggle('toggle-handle-on-state');
})
  </script>
</body>
</html>