css实现笑脸表情胶囊开关点击效果代码-html代码-BFW代码库

css实现笑脸表情胶囊开关点击效果代码

代码语言：html

代码描述：css实现笑脸表情胶囊开关点击效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        .switch.off:before, .switch.off:after, .switch.on:before, .switch.on:after {
      -webkit-transition: 0.6s;
      transition: all 0.6s;
    }
    
    body {
      background-color: #2A6B64;
      height: 100vh;
      justify-content: center;
      align-items: center;
    }
    
    .switch {
      position: relative;
      width: 75px;
      height: 40px;
      background-color: #2c2c2c;
      color: #000;
      -webkit-transition: all 0.6s;
      transition: all 0.6s;
      margin:200px auto;
    }
    
    .switch.off,
    .switch.on {
      border-radius: 25px;
      padding: 5px;
      cursor: pointer;
    }
    
    .switch.off:before,
    .switch.on:before {
      display: block;
      position: absolute;
      content: "";
      height: 39px;
      width: 39px;
      left: 4px;
      top: 5px;
      background-color: #F2C74E;
      -webkit-transition: 0.6s;
      transition: all 0.6s;
      -webkit-transition-delay: 0.01s;
      transition-delay: 0.01s;
      -moz-box-shadow: inset -8px -8px 6px -6px #c7960f;
      -webkit-box-shadow: inset -8px -8px 6px -6px #c7960f;
 .........完整代码请登录后点击上方下载按钮下载查看