0712-2888027 189-8648-0214
微信公眾號

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

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

純CSS3實現動畫圓弧進度條

時間:2022-01-21來源:風信官網 點擊: 663次

來自國外的一個牛人寫的代碼,根據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 動畫圓弧 進度條
欄目列表
推薦內容
熱點內容
展開
亚洲乱亚洲乱妇无码