<video id="h99qi"><ins id="h99qi"><span id="h99qi"></span></ins></video>

        <var id="h99qi"><td id="h99qi"></td></var>
        1. <acronym id="h99qi"></acronym>
          <wbr id="h99qi"><code id="h99qi"><span id="h99qi"></span></code></wbr>

          1. <var id="h99qi"><th id="h99qi"></th></var>
            0712-2888027 189-8648-0214
            微信公眾號

            孝感風信網絡科技有限公司微信公眾號

            當前位置:主頁 > 技術支持 > HTML5/CSS3 > 純CSS3實現動畫圓弧進度條

            純CSS3實現動畫圓弧進度條

            時間:2024-05-14來源:風信官網 點擊: 1501次

            來自國外的一個牛人寫的代碼,根據css3的clip、transformanimation來實現的效果,所以你需要很清楚的知道這些屬性是具有哪些作用的才能明白他這個CSS的原理。
            純CSS3實現動畫圓弧進度條

            代碼如下:

            <div class="wrapper" data-anim="base wrapper">
              <div class="circle" data-anim="base left"></div>
              <div class="circle" data-anim="base right"></div>
            </div>

            首先定義基本樣式:

            
            .wrapper {
              width: 100px; /* Set the size of the progress bar */
              height: 100px;
              position: absolute; /* Enable clipping */
              clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
            }
            /* Set the sizes of the elements that make up the progress bar */
            .circle {
              width: 80px;
              height: 80px;
              border: 10px solid green;
              border-radius: 50px;
              position: absolute;
              clip: rect(0px, 50px, 100px, 0px);
            }

            接著是動畫規則

            /* Using the data attributes for the animation selectors. */
            /* Base settings for all animated elements */
            div[data-anim~=base] {
              -webkit-animation-iteration-count: 1;  /* Only run once */
              -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
              -webkit-animation-timing-function:linear; /* Linear animation */
            }
            
            .wrapper[data-anim~=wrapper] {
              -webkit-animation-duration: 0.01s; /* Complete keyframes asap */
              -webkit-animation-delay: 3s; /* Wait half of the animation */
              -webkit-animation-name: close-wrapper; /* Keyframes name */
            }
            
            .circle[data-anim~=left] {
              -webkit-animation-duration: 6s; /* Full animation time */
              -webkit-animation-name: left-spin;
            }
            
            .circle[data-anim~=right] {
              -webkit-animation-duration: 3s; /* Half animation time */
              -webkit-animation-name: right-spin;
            }

            最后是動畫幀

            /* Rotate the right side of the progress bar from 0 to 180 degrees */
            @-webkit-keyframes right-spin {
              from {
                -webkit-transform: rotate(0deg);
              }
              to {
                -webkit-transform: rotate(180deg);
              }
            }
            /* Rotate the left side of the progress bar from 0 to 360 degrees */
            @-webkit-keyframes left-spin {
              from {
                -webkit-transform: rotate(0deg);
              }
              to {
                -webkit-transform: rotate(360deg);
              }
            }
            /* Set the wrapper clip to auto, effectively removing the clip */
            @-webkit-keyframes close-wrapper {
              to {
                clip: rect(auto, auto, auto, auto);
              }
            }

            操作原理:

            首先:是定義三個動畫,第一個是最外層,讓他只顯示一半,然后運行3s,同時右邊運行3s,從0到180度。

            接著:到了180度之后,釋放外層的顯示一半,讓他自動顯示其他。然后右邊的停止動畫并停在那里。

            最后:左邊的在原來的基礎(跟右邊一樣運行3s,同樣轉過180度)再繼續轉動180度。

            演示地址:pure css circular progress bar

            熱門關鍵詞: CSS3 動畫圓弧 進度條
            欄目列表
            推薦內容
            熱點內容
            展開
            亚洲精品在线视频_18禁无码毛片精品久久久久久_精品熟妇无码av免费久久_午夜福利片