技術標籤：html+csshtmlcss3html5

頁面載入loading動畫

body部分

  <div class="box">
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
    </div>
 

css部分

 *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    body{
            width: 100%;
             height: 100vh;
        
            display: flex;
            background: gray;
            justify-content: center;
            align-items: center;
        }
        .box{
       
            display: flex;
          
        }
        .box  .box1{
            width: 20px;
            height: 20px;
         border-radius: 50%;
         background: #fff;
         margin: 5px;
         position: relative;

        }
        .box1::before{
           content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            background: #fff;
            border-radius: 50%;
            animation: g 1s ease-out infinite;

        } 
        .box1:nth-child(1){
          
            background: khaki;
        }
        .box1:nth-child(2){
           
            background: red;
        }
        .box1:nth-child(3){
         
            background: black;
        }
        .box1:nth-child(4){
           
            background: blue;
        }
        .box1:nth-child(5){
           
            background: hotpink;
        }
        .box1:nth-child(1)::before{
            animation-delay: 0s;
           
        }
        .box1:nth-child(2)::before{
            animation-delay: 0.2s;
           
        }
        .box1:nth-child(3)::before{
            animation-delay: 0.4s;
           
        }
        .box1:nth-child(4)::before{
            animation-delay: 0.6s;
           
        }
        .box1:nth-child(5)::before{
            animation-delay: 0.8s; /*延遲時間*/
           
        }
        @keyframes g{
           50%,
           70% {
               transform: scale(2.5);
           }
           80%,
           100% {
                opacity: 0;
           }
        }
 

效果如下

總結分析：這個小案例主要用了：before偽元素

什麼是偽元素呢？

css的偽元素，之所以被稱為偽元素，是因為他們不是真正的頁面元素，html沒有對應的元素，但是其所有用法和表現行為與真正的頁面元素一樣，可以對其使用諸如頁面元素一樣的css樣式，表面上看上去貌似是頁面的某些元素來展現，實際上是css樣式展現的行為，因此被稱為偽元素。如下圖，是偽元素在html程式碼機構中的展現，可以看出無法偽元素的結構無法。

常見的偽元素

css有一系列的偽元素，如:before，:after，:first-line，:first-letter 等
本案例所用到的偽元素:before，:after，它們的用法：

使用偽元素注意事項

偽元素:before和:after新增的內容預設是inline元素；這個兩個偽元素的content屬性，表示偽元素的內容,設定:before和:after時必須設定其content屬性，否則偽元素就不起作用。

偽元素的特點

• 偽元素不屬於文件，所以js無法操作它

• 偽元素屬於主元素的一部分，因此點選偽元素觸發的是主元素的click事件

• 原文說塊級元素才能有:before, :after，其實是不妥的，大部分行級元素也可以設定偽元素，但是像img可替換元素，因為其外觀和尺寸有外部資源決定，那麼如果外部資源正確載入，就會替換掉其內部內容，這時偽元素也會被替換掉，但是當外部資源載入失敗時，設定的偽元素是可以起作用的。

• 偽元素可以清除浮動