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

Posted 2020-08-18

原文地址：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;
    }
}