css实现萤火虫展开翅膀亮checkbox美化效果代码

代码语言:html

所属分类:表单美化

代码描述:css实现萤火虫展开翅膀亮checkbox美化效果代码

代码标签: css 萤火虫 翅膀 checkbox 美化

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      height: 100vh;
      background: radial-gradient(#0a2a43 30%, #09243a);
      font-family: "Asap", sans-serif;
    }
    body:after {
      content: "";
      display: block;
      position: absolute;
      top: 1rem;
      right: 1rem;
      bottom: 1rem;
      left: 1rem;
      border: 4px solid #071c2d;
      border-radius: 2px;
      background: none;
      pointer-events: none;
    }
    
    .label {
      flex: 0;
      color: #b8c5d0;
      letter-spacing: 0.04em;
      text-align: center;
      margin-bottom: 2rem;
      font-size: 3rem;
    }
    @media screen and (min-width: 60rem) {
      .label {
        font-size: 5vw;
      }
    }
    
    .checkbox-wrap {
      flex: none;
      position: re.........完整代码请登录后点击上方下载按钮下载查看

网友评论0