91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS3怎么實現跳動圈動畫效果

發布時間:2023-01-05 09:55:52 來源:億速云 閱讀:118 作者:iii 欄目:開發技術

這篇“CSS3怎么實現跳動圈動畫效果”文章的知識點大部分人都不太理解,所以小編給大家總結了以下內容,內容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“CSS3怎么實現跳動圈動畫效果”文章吧。

效果:

CSS3怎么實現跳動圈動畫效果

html代碼:

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

css代碼:

#preloader-4{
    position: relative;
}
#preloader-4 span{
    position:absolute;
    width:16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    animation: bounce 1s infinite linear;
}
#preloader-4 span:nth-child(1){
    left:0;
    animation-delay: 0s;
}
#preloader-4 span:nth-child(2){
    left:20px;
    animation-delay: 0.25s;
}
#preloader-4 span:nth-child(3){
    left:40px;
    animation-delay: 0.5s;
}
#preloader-4 span:nth-child(4){
    left:60px;
    animation-delay: 0.75s;
}
#preloader-4 span:nth-child(5){
    left:80px;
    animation-delay: 1.0s;
}
@keyframes bounce{
    0%{transform: translateY(0px);opacity: 0.5;}
    50%{transform: translateY(-30px);opacity: 1.0;}
    100%{transform: translateY(0px);opacity: 0.5;}
}

css的基本語法是什么

css的基本語法是:

1、css規則由選擇器和一條或多條聲明兩個部分構成;

2、選擇器通常是需要改變樣式的HTML元素;

3、每條聲明由一個屬性和一個值組成;

4、屬性和屬性值被冒號分隔開。

以上就是關于“CSS3怎么實現跳動圈動畫效果”這篇文章的內容,相信大家都有了一定的了解,希望小編分享的內容對大家有幫助,若想了解更多相關的知識內容,請關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

昌图县| 延安市| 威海市| 台州市| 仁怀市| 太湖县| 九龙坡区| 集安市| 屯门区| 广南县| 皋兰县| 广东省| 兰西县| 通城县| 南和县| 霍邱县| 蓝田县| 定襄县| 泰和县| 当雄县| 瓮安县| 朔州市| 彭泽县| 襄樊市| 常山县| 炉霍县| 祁东县| 康马县| 石渠县| 太康县| 江油市| 抚松县| 通辽市| 呼伦贝尔市| 临颍县| 天等县| 隆尧县| 金沙县| 公主岭市| 扶风县| 吴江市|