久草在线观看福利-在线伊人网-欲求不满的岳中文字幕-四川少妇被弄到高潮-黄色免费网站在线-国产做爰全免费的视频软件-精品国产女主播在线观看-成人综合影院-97人人模人人爽人人喊38tv-精品一区二区无码免费-丰满人妻中伦妇伦精品app-免费网站91-免费精品国产一区二区三区-www国产国人免费观看视频-国产啪精品视频网站免费

來(lái)自國(guó)外的一個(gè)牛人寫(xiě)的代碼，根據(jù)css3的clip、transform和animation來(lái)實(shí)現(xiàn)的效果，所以你需要很清楚的知道這些屬性是具有哪些作用的才能明白他這個(gè)CSS的原理。

• clip
• transform
• keyframes
• animation-duration
• animation-delay
• animation-name
• animation-iteration-count
• animation-fill-mode
• animation-timing-function

代碼如下：

<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);
}

接著是動(dòng)畫(huà)規(guī)則

/* 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;
}

最后是動(dòng)畫(huà)幀

/* 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);
  }
}

操作原理：

首先：是定義三個(gè)動(dòng)畫(huà)，第一個(gè)是最外層，讓他只顯示一半，然后運(yùn)行3s，同時(shí)右邊運(yùn)行3s,從0到180度。

接著：到了180度之后，釋放外層的顯示一半，讓他自動(dòng)顯示其他。然后右邊的停止動(dòng)畫(huà)并停在那里。

最后：左邊的在原來(lái)的基礎(chǔ)（跟右邊一樣運(yùn)行3s，同樣轉(zhuǎn)過(guò)180度）再繼續(xù)轉(zhuǎn)動(dòng)180度。

演示地址：pure css circular progress bar