zoukankan      html  css  js  c++  java
  • 63(原67).纯 CSS 创作单元素点阵 loader

    原文地址:https://segmentfault.com/a/1190000015444368

    感想:CSS又一次让我见识到它的强大之处 --》 box-shadow 。

    box-shadow拓展地址:https://scrimba.com/c/cQpyKbUp

    HTML code:

    <!-- 定义 dom,只有 1 个元素 -->
    <div class="loader"></div>

    CSS code:

    html, body {
        margin: 0;
        padding: 0;
    }
    /* 设置所有元素的width、height包括边框、内边距、内容区 */
    *{
        box-sizing: border-box;
    }
    /* 设置body的子元素水平垂直居中 */
    body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: radial-gradient(darkgreen 30%, forestgreen);
    }
    /* 设置.loader容器样式 */
    .loader {
        /* 在此设置font-size就不要设置后代元素的font-size */
        font-size: 20px;
        width: 10em;
        height: 10em;
        border: 1px solid white;
    }
    /* 用box-shadow画出2组点阵 */
    .loader::before,
    .loader::after {
        content: '';
        width: 1em;
        height: 1em;
        border-radius: 50%;
        background-color: currentColor;
        position: absolute;
        box-shadow:
            0 0,   2em 0,   4em 0,   6em 0,
            0 2em, 2em 2em, 4em 2em, 6em 2em,
            0 4em, 2em 4em, 4em 4em, 6em 4em,
            0 6em, 2em 6em, 4em 6em, 6em 6em;
        animation: round 2s ease infinite;
    }
    .loader::before {
        color: gold;
    }
    .loader::after {
        color: dodgerblue;
        animation-delay: -1s;
    }
    @keyframes round {
        0%  { transform: translateX(0) translateY(0);     }
        25% { transform: translateX(3em) translateY(0);   }
        50% { transform: translateX(3em) translateY(3em); }
        75% { transform: translateX(0) translateY(3em);   }
    }
  • 相关阅读:
    Mysql 命令行连接
    linux下安装MongoDB数据库
    SVN 提交常见报错及解决方案
    解决 SVN Skipped 'xxx' -- Node remains in conflict
    linux svn 切换用户
    SQL基础语法
    yml
    搭建笔记(1)
    文件上传MultipartFile
    18.线程池
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10664910.html
Copyright © 2011-2022 走看看