這篇文章主要介紹使用純CSS實(shí)現(xiàn)在容器中反彈小球的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

專業(yè)成都網(wǎng)站建設(shè)公司，做排名好的好網(wǎng)站，排在同行前面，為您帶來(lái)客戶和效益!創(chuàng)新互聯(lián)為您提供成都網(wǎng)站建設(shè)，五站合一網(wǎng)站設(shè)計(jì)制作，服務(wù)好的網(wǎng)站設(shè)計(jì)公司，成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)負(fù)責(zé)任的成都網(wǎng)站制作公司!效果預(yù)覽

源代碼下載

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，只有一個(gè)元素：

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

定義容器的尺寸：

.loader {
    width: 10em;
    height: 3em;
    border: 0.3em solid silver;
    border-radius: 3em;
    font-size: 20px;
}

把容器左右兩側(cè)分別涂上不同的顏色：

.loader {
    border-left-color: hotpink;
    border-right-color: dodgerblue;
}

在容器中畫一個(gè)小球：

.loader {
    position: relative;
}

.loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    background-color: dodgerblue;
}

讓小球在容器中往復(fù)移動(dòng)：

.loader::before {
    animation: shift 3s linear infinite;
}

@keyframes shift {
    50% {
        left: 7em;
    }
}

再讓小球在撞到兩端時(shí)變色：

.loader::before {
    animation:
        shift 3s linear infinite,
        change-color 3s linear infinite;
}

@keyframes change-color {
    0%, 55% {
        background-color: dodgerblue;
    }

    5%, 50% {
        background-color: hotpink;
    }
}

最后，讓容器不停地旋轉(zhuǎn)：

.loader {
    animation: spin 3s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

以上是使用純CSS實(shí)現(xiàn)在容器中反彈小球的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

文章題目：使用純CSS實(shí)現(xiàn)在容器中反彈小球的方法-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://weahome.cn/article/icdph.html