• 46.纯 CSS 创作一个在容器中反弹的小球


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

    练习地址:https://scrimba.com/c/c3GEWmTb

    感想: 原来animation 中可以有多个动画,用 ,  分开即可!

    HTML code:

    <div class="loader"></div>

    CSS code:

    html, body {
        margin: 0;
        padding: 0;
    }
    body{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
    }
    /* 定义.loader容器尺寸*/
    .loader{
        position: relative;
        font-size: 20px;
        width: 10em;
        height: 3em;
        /* silver : 银色 */
        border: 0.3em solid silver;
        border-radius: 3em;
        /* 给容器左右两侧涂上不同颜色 */
        border-left-color: hotpink;
        border-right-color: blue;
        /* 让容器.loader不停旋转 */
        animation: spin 3s linear infinite;
    }
    @keyframes spin{
        to{
            transform: rotate(360deg);
        }
    }
    /* 画个小球 */
    .loader::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3em;
        height: 3em;
        border-radius: 50%;
        background-color: blue;
        /* shift : 转移 */
        animation: 
            /* 这里居然可以放两个动画在一起,666 */
            shift 3s linear infinite,
            change-color 3s linear infinite;
    }
    @keyframes shift{
        50%{
            left: 7em;
        }
    }
    @keyframes change-color{
        0%, 55%{
            background-color: blue;
        }
        5%, 50%{
            background-color: hotpink;
        }
    }
  • 相关阅读:
    sort color (荷兰国旗)
    先序遍历和后序遍历构建二叉树
    二叉树的遍历
    排序
    内存相关内容
    chrome控制台console方法表
    记一次移动端CSS引发的小Bug
    JavaScript的事件
    浅谈webpack打包原理
    JS模块化进程
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10462207.html
Copyright © 2020-2023  润新知