CSS3怎么實(shí)現(xiàn)交錯(cuò)圈動(dòng)畫效果

發(fā)布時(shí)間：2023-01-05 09:52:07 來源：億速云閱讀：119 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“CSS3怎么實(shí)現(xiàn)交錯(cuò)圈動(dòng)畫效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS3怎么實(shí)現(xiàn)交錯(cuò)圈動(dòng)畫效果”吧!

效果：

html代碼：

<body style="background: #4ad3b4;">
    <div id="preloader-2">
        <span></span>
        <span></span>
    </div>
</body>

css代碼：

#preloader-2{
    position: relative;
}
#preloader-2 span{
    position: absolute;
    width:30px;
    height: 30px;
    background: #fff;
    border-radius: 999px;
}
#preloader-2 span:nth-child(1){
    animation: cross-1 1.5s infinite linear;
}
#preloader-2 span:nth-child(2){
    animation: cross-2 1.5s infinite linear;
}
@keyframes cross-1{
    0%{transform: translateX(0); opacity: 0.5;}
    50%{transform: translateX(80px); opacity: 1;}
    100%{transform: translateX(0);opacity: 0.5;}
}
@keyframes cross-2{
    0%{transform: translateX(80px); opacity: 0.5;}
    50%{transform: translateX(0); opacity: 1;}
    100%{transform: translateX(80px);opacity: 0.5;}
}

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標(biāo)簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

到此，相信大家對(duì)“CSS3怎么實(shí)現(xiàn)交錯(cuò)圈動(dòng)畫效果”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

CSS3怎么實(shí)現(xiàn)交錯(cuò)圈動(dòng)畫效果

css的選擇器有哪些

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽