仿 Tailwind CSS 官网首页 一个 button 的变化动画

仿 Tailwind CSS 官网首页 一个 button 的变化动画

先来看一下 tailwind CSS 官网这个动画的效果. 模仿这个动画可以学到的是定义和使用 CSS 变量以及在 JavaScript 中操作修改 CSS 变量. 在之前的交互动画模仿中, 借用了 <input type="radio">, 而这次则改用 <input type="checkbox">

下面是我模仿的结果

HTML

<div class="container flex">
   <input type="checkbox" title="this input" name="input" id="input-switch">
   <label for="input-switch">
     <div class="switch">
       <div class="button"></div>
     </div>
   </label>
 </div>

因为开关是可以开也可以关, 所以不能用 radio 因为其开了再点就不会关. 所以改用 checkbox

CSS

1. 定义两个变量, 分别表示开关的开关和默认的背景颜色, 重置样式, 定义一个 flex 的水平垂直居中布局

   :root {
        
     --radius: 20px;
     --bgColor: #fff;
   }
   * {
        
     padding: 0;
     margin: 0;
   }
   .flex {
        
     display: flex;
     justify-content: center;
     align-items: center;
   }
   

2. 设置 container 容器的样式. 这里要使用之前定义的变量 bgColor, 给背景颜色的变化加上线性过渡

   .container {
        
     height: 100vh;
     background-color: var(--bgColor);
     transition: background-color .2s linear