zoukankan      html  css  js  c++  java
  • 50.1扩展之小球摆动

    感想: 动画(角度)+ 定位。

    HTML code:

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

    CSS code:

    html, body {
        margin: 0;
        padding: 0;
    }
    body{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .loader{
        /*  position: absolute; */
        display: flex;
        /* space-between 在此不会令其水平居中 */
        justify-content: center;
        align-items: flex-start; /* 这是默认值 */
        font-size: 15px;
        width: 12em;
        height: 10em;
        border: none;
        border-top: 10px solid blue;
    }
    /* 画出小球的挂线 */
    .loader span{
        position: relative;
        width: 0.2em;
        height: 8em;
        background-color: black;
        /* 定下顶部不动点 */
        transform-origin: top;
        /* cubic-bezier(n,n,n,n) 函数定义速度曲线    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 */
        animation: moving-up 2s ease-in-out infinite normal;
    }
    @keyframes moving-up{
        0%{
            transform: rotate(-45deg);
        }
        50%{
            transform: rotate(45deg);
        }
        100%{
            transform: rotate(-45deg);
        }
    }
    /* 画出小球 */
    .loader span::before{
        content: '';
        width: 2em;
        height: 2em;
        border-radius: 50%;
        position: absolute;
        left: -0.9em;
        bottom: -1em;
        background-color: black;
    }
  • 相关阅读:
    django 中 null=True 和 blank=True的区别!
    利用js代码屏蔽f12,右键,粘贴,复制,剪切,选中,操作!!秀!秀!秀!
    jupyter notebook快速入门教程
    锁相关
    事务相关
    索引
    体系结构
    数据类型
    字符集
    部署规范
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10490626.html
Copyright © 2011-2022 走看看