pos spa 代碼 部分 height osi nsf abs 通過

實現思想：

1.最外層包裹內部的div1(.box)

2.內部左右兩邊div2(.left_box和.right_box)，寬度為div1的一半，通過overflow:hidden隱藏其內部的div

3.在左右兩個div2中各有一個div3(.left_item和.right_item)，div3在div2中旋轉，旋轉超出div2後被隱藏實現倒計時的效果

4.遮罩div4(.mask),用來遮住中心部分，形成進度“條”的效果

css代碼：

    .box{
      /* 最外層的盒子 */
      width:200px;
      height:200px;
      margin: 0 auto
 
;
      position: relative;
      overflow: hidden;
      border-radius: 50%;
      background-color: pink;
    }
    .left_box,.right_box{
      /* 
        左右兩邊用於 隱藏 旋轉的div的盒子 
        通過overflow來隱藏內部div旋轉出去的部分
      */
      position: absolute;
      top: 0;
      width:100px;
      height:200px;
      overflow
 
: hidden;
      z-index: 1;
    }
    .left_box{
      left: 0;
    }
    .right_box{
      right: 0;
    }
    .left_item,.right_item{
      /* 
       這是需要旋轉的div(沒有被mask遮蓋展示出來的部分作為倒計時的線條)
       為了方便理解，下面用deeppink和cyan分別設置了左右兩邊div的顏色
      */
      width: 100px;
      height: 200px;
    }
    .left_item{
      /*
 

       1.設置圓角，圓角大小為高度的一半
       2.這只旋轉的中心店，這是左邊圓，中心點設置到右邊中心點，右邊圓則設置到左邊中心點
       */
      border-top-left-radius: 100px;
      border-bottom-left-radius: 100px;
      -webkit-transform-origin: right center;
      transform-origin: right center;
      -webkit-animation: loading_left 3s linear;
      background-color: deeppink;
    }
    .right_item{
      border-top-right-radius: 100px;
      border-bottom-right-radius: 100px;
      -webkit-transform-origin: left center;
      transform-origin: left center;
      -webkit-animation: loading_right 3s linear;
      background-color: cyan;
    }
    .mask{
      /* 遮住div多余的部分，呈現出線條的效果 */
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      z-index: 2;
      border-radius: 50%;
      background-color: #fff;
    }
    @-webkit-keyframes loading_left{
        0%{
            -webkit-transform: rotate(0deg);
        }
        50%{
            -webkit-transform: rotate(0deg);
        }
        100%{
            -webkit-transform: rotate(180deg);
        }
    }
    @-webkit-keyframes loading_right{
        0%{
          -webkit-transform: rotate(0deg);
        }
        50%{
          -webkit-transform: rotate(180deg);
        }
        100%{
          -webkit-transform: rotate(180deg);
        }
    }

html代碼：

<div class="box">
   <div class="left_box">
     <div class="left_item"></div>
   </div>
   <div class="right_box">
     <div class="right_item"></div>
   </div>
   <div class="mask"></div>
 </div>

.box{ /* 最外層的盒子 */ background: pink; width:200px; height:200px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 50%; } .left_box,.right_box{ /* 左右兩邊用於 隱藏 旋轉的div的盒子 通過overflow來隱藏內部div旋轉出去的部分 */ position: absolute; top: 0; width:100px; height:200px; overflow: hidden; z-index: 1; } .left_box{ left: 0; } .right_box{ right: 0; } .left_item,.right_item{ /* 這是需要旋轉的div(沒有被mask遮蓋展示出來的部分作為倒計時的線條) */ width: 100px; height: 200px; } .left_item{ /* 1.設置圓角，圓角大小為高度的一半 2.這只旋轉的中心店，這是左邊圓，中心點設置到右邊中心點，右邊圓則設置到左邊中心點 */ border-top-left-radius: 100px; border-bottom-left-radius: 100px; -webkit-transform-origin: right center; transform-origin: right center; -webkit-animation: loading_left 3s linear; background: deeppink; } .right_item{ border-top-right-radius: 100px; border-bottom-right-radius: 100px; -webkit-transform-origin: left center; transform-origin: left center; -webkit-animation: loading_right 3s linear; background: cyan; } .mask{ /* 遮住div多余的部分，呈現出線條的效果 */ position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; z-index: 2; border-radius: 50%; background-color: #fff; } @-webkit-keyframes loading_left{ 0%{ -webkit-transform: rotate(0deg); } 50%{ -webkit-transform: rotate(0deg); } 100%{ -webkit-transform: rotate(180deg); } } @-webkit-keyframes loading_right{ 0%{ -webkit-transform: rotate(0deg); } 50%{ -webkit-transform: rotate(180deg); } 100%{ -webkit-transform: rotate(180deg); } }

css實現圓形倒計時效果