css实现中性radio单选框美化效果代码-html代码-BFW代码库

css实现中性radio单选框美化效果代码

代码语言：html

代码描述：css实现中性radio单选框美化效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        html {
      box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    
    body {
      height: 100vh;
      display: -webkit-box;
      display: flex;
      -webkit-box-align: center;
              align-items: center;
      -webkit-box-pack: center;
              justify-content: center;
      background-color: #ecf0f3;
      font-family: 'IBM Plex Sans Condensed', sans-serif;
    }
    
    .radiogroup {
      padding: 48px 64px;
      border-radius: 16px;
      background: #ecf0f3;
      box-shadow:
        4px 4px 4px 0px #d1d9e6 inset,
        -4px -4px 4px 0px #ffffff inset;
    }
    
    
    .wrapper {
      margin: 8px 0;
    }
    
    .state {
      position: absolute;
      top: 0;
      right: 0;
      opacity: 1e-5;
      pointer-events: none;
    }
    
    .label {
      display: -webkit-inline-box;
      display: inline-flex;
      -webkit-box-align: center;
              align-items: center;
      cursor: pointer;
      color: #394a56;
    }
    
    .text {
      margin-left: 16px;
      opacity: .6;
      -webkit-transition: opacity .2s linear, -webkit-transform .2s ease-out;
      transition: opacity .2s linear, -webkit-transform .2s ease-out;
      transition: opacity .2s linear, transform .2s ease-out;
      transition: opacity .2s linear, transform .2s ease-out, -webkit-transform .2s ease-out;
    }
    
    .indicator {
      position: relative;
      border-radius: 50%;
      height: 30px;
      width: 30px;
      box-shadow:
        -8px -4px 8px 0px #ffffff,
        8px 4px 12px 0px #d1d9e6;
      overflow: hidden;
    }
    
    .indicator::before,
    .indicator::after {
      content: '';
      position: absolute;
      top: 10%;
      left: 10%;
      height: 80%;
      width: 80%;
      border-radius: 50%;
    }
    
    .indicator::before {
      box-shadow:
        -4px -2px 4px 0px #d1d9e6,
        4px 2px 8px 0px #fff;
    }
    
    .indicator::after {
      background-color: #ecf0f3;
      box-shadow:
        -4px -2px 4px 0px #fff,
        4px 2px 8px 0px #d1d9e6;
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
      -webkit-transition: opacity .25s ease-in-out, -webkit-transform .25s ease-in-out;
      transition: opacity .25s ease-in-out, -webkit-transform .25s ease-in-out;
      transition.........完整代码请登录后点击上方下载按钮下载查看