50.1扩展之小球摆动

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;
}

 

posted on 2019-03-07 16:42  人生与戏 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/FlyingLiao/p/10490626.html