css3實現絢麗loadding載入效果

antzone發表於2017-03-13

分享一段程式碼例項，它實現了非常絢麗的loadding載入效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body {
  background: #282828;
}
.overwatch {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -80px 0px 0px -80px;
  background-color: transparent;
  border-radius: 50%;
  border: 20px solid #B6B8C0;
}
.overwatch div.across-line:after {
  content: "";
  height: 4px;
  width: 22px;
  background: #282828;
  position: absolute;
  top: 1px;
  left: 1px;
  transform: rotate(45deg);
  transform-origin: bottom left;
  z-index: 10;
}
.overwatch div.across-line:before {
  content: "";
  height: 4px;
  width: 22px;
  background: #282828;
  position: absolute;
  top: 15px;
  right: -5px;
  transform: rotate(-45deg);
  transform-origin: bottom left;
  z-index: 10;
}
.overwatch div.taper:after {
  content: "";
  border-width: 0 0 50px 20px;
  border-style: solid;
  border-color: transparent transparent #B6B8C0;
  width: 0;
  height: 0;
  position: absolute;
  right: 62px;
  bottom: 44px;
}
.overwatch div.taper:before {
  content: "";
  border-width: 0 20px 50px 0;
  border-style: solid;
  border-color: transparent transparent #B6B8C0;
  width: 0;
  height: 0;
  position: absolute;
  left: 63px;
  bottom: 44px;
}
.overwatch:after {
  content: "";
  height: 20px;
  width: 66px;
  background: #B6B8C0;
  position: absolute;
  bottom: -3px;
  left: 11px;
  transform: rotate(-45deg) skew(-45deg);
  transform-origin: bottom left;
}
.overwatch:before {
  content: "";
  height: 20px;
  width: 66px;
  background: #B6B8C0;
  position: absolute;
  bottom: 44px;
  right: -9px;
  transform: rotate(45deg) skew(45deg);
  transform-origin: bottom left;
}
.inner-ring {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  margin: -100px 0px 0px -100px;
  background-color: transparent;
  border-radius: 50%;
  background-color: transparent;
  border-radius: 50%;
  border: 10px solid #F9D64A;
  clip: rect(90px, 200px, 110px, 100px);
  animation: rotate 3s linear infinite;
}
.inner-ring1 {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0px 0px -100px;
  background-color: transparent;
  border-radius: 50%;
  background-color: transparent;
  border-radius: 50%;
  animation: rotate21 2s linear infinite;
}
.inner-ring1 .inner-ring1-c {
  position: relative;
  width: 100px;
  height: 200px;
  overflow: hidden;
}
.inner-ring1 .inner-ring1-r {
  width: 180px;
  height: 180px;
  border: 10px solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10px solid #F9D64A;
  border-left: 10px solid #F9D64A;
  transform: rotate(0deg);
  animation: ring11 2s linear infinite;
}
.inner-ring2 {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0px 0px -100px;
  background-color: transparent;
  border-radius: 50%;
  background-color: transparent;
  border-radius: 50%;
  animation: rotate22 2s linear infinite;
}
.inner-ring2 .inner-ring2-c {
  position: relative;
  width: 100px;
  height: 200px;
  overflow: hidden;
}
.inner-ring2 .inner-ring2-r {
  width: 180px;
  height: 180px;
  border: 10px solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10px solid #F9D64A;
  border-left: 10px solid #F9D64A;
  transform: rotate(0deg);
  animation: ring12 2s linear infinite;
}
.inner-ring3 {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0px 0px -100px;
  background-color: transparent;
  border-radius: 50%;
  background-color: transparent;
  border-radius: 50%;
  animation: ring6 2s infinite linear;
}
.inner-ring3 .inner-ring3-p1-c {
  position: relative;
  float: left;
  width: 100px;
  height: 200px;
  overflow: hidden;
}
.inner-ring3 .inner-ring3-p1-r {
  width: 180px;
  height: 180px;
  border: 10px solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10px solid rgba(189, 186, 62, 0.25);
  border-left: 10px solid rgba(189, 186, 62, 0.25);
  transform: rotate(-45deg);
  animation: ring4 2s linear infinite;
}
.inner-ring3 .p1-an {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  animation: ring5 2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.inner-ring3 .inner-ring3-p2-c {
  position: relative;
  float: right;
  width: 100px;
  height: 200px;
  transform: rotate(180deg);
  overflow: hidden;
}
.inner-ring3 .inner-ring3-p2-r {
  width: 180px;
  height: 180px;
  border: 10px solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10px solid rgba(189, 186, 62, 0.25);
  border-left: 10px solid rgba(189, 186, 62, 0.25);
  transform: rotate(-45deg);
  animation: ring2 2s cubic-bezier(0.5, 0, 1, 0.5) infinite;
}
.inner-ring3 .p2-an {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  animation: ring3 2s linear infinite;
}
.outer-ring {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  margin: -116px 0px 0px -116px;
  background-color: transparent;
  border-radius: 50%;
  border: 6px solid transparent;
}
.outer-ring:after {
  content: "";
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
  width: 220px;
  height: 220px;
  border: 6px solid rgba(161, 164, 176, 0.5);
  border-radius: 50%;
  clip: rect(112px, 232px, 120px, 100px);
  animation: rotate3602 3s linear infinite reverse;
}
.outer-ring:before {
  content: "";
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
  width: 220px;
  height: 220px;
  border: 6px solid rgba(161, 164, 176, 0.5);
  border-radius: 50%;
  clip: rect(105px, 232px, 127px, 100px);
  animation: rotate3603 3s cubic-bezier(0.34, 0.07, 0.68, 0.93) infinite;
}
.outer-ring2 {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  margin: -116px 0px 0px -116px;
  background-color: transparent;
  border-radius: 50%;
  border: 6px solid transparent;
}
.outer-ring2:after {
  content: "";
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
  width: 220px;
  height: 220px;
  border: 6px solid rgba(161, 164, 176, 0.5);
  border-radius: 50%;
  transform: rotate(120deg);
  clip: rect(80px, 232px, 152px, 100px);
  animation: rotate3602 3s linear infinite;
}
.outer-ring2:before {
  content: "";
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
  width: 220px;
  height: 220px;
  border: 6px solid rgba(161, 164, 176, 0.5);
  border-radius: 50%;
  transform: rotate(230deg);
  clip: rect(60px, 232px, 172px, 100px);
  animation: rotate360 3s cubic-bezier(0.34, 0.07, 0.68, 0.93) infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(360deg);
    clip: rect(96px, 200px, 108px, 100px);
  }
  50% {
    clip: rect(92px, 200px, 108px, 100px);
  }
  100% {
    clip: rect(96px, 200px, 108px, 100px);
    transform: rotate(0deg);
  }
}
@keyframes rotate21 {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(540deg);
  }
}
@keyframes rotate22 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate3602 {
  0% {
    transform: rotate(120deg);
  }
  100% {
    transform: rotate(480deg);
  }
}
@keyframes rotate3603 {
  0% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}
@keyframes ring11 {
  0% {
    transform: rotate(-223deg);
  }
  50% {
    transform: rotate(-170deg);
  }
  100% {
    transform: rotate(-223deg);
  }
}
@keyframes ring12 {
  0% {
    transform: rotate(-205deg);
  }
  50% {
    transform: rotate(-135deg);
  }
  100% {
    transform: rotate(-205deg);
  }
}
@keyframes ring2 {
  0% {
    transform: rotate(-45deg);
  }
  35.5% {
    transform: rotate(135deg);
  }
  100% {
    transform: rotate(135deg);
  }
}
@keyframes ring3 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  64.5% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes ring4 {
  0% {
    transform: rotate(-45deg);
  }
  35.5% {
    transform: rotate(-45deg);
  }
  50% {
        transform: rotate(135deg);
      }
 
      100% {
        transform: rotate(135deg);
      }
}
@keyframes ring5 {
  0% {
    transform: rotate(0deg);
  }
  64.5% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes ring6 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
</head>
<body>
  <div class="overwatch">
    <div class="across-line"></div>
    <div class="taper"></div>
  </div>
  <div class="inner-ring3">
    <div class="inner-ring3-p1-c">
      <div class="p1-an">
        <div class="inner-ring3-p1-r"></div>
      </div>
    </div>
    <div class="inner-ring3-p2-c">
      <div class="p2-an">
        <div class="inner-ring3-p2-r"></div>
      </div>
    </div>
  </div>
  <div class="inner-ring"></div>
  <div class="inner-ring2">
    <div class="inner-ring2-c">
      <div class="inner-ring2-r"></div>
    </div>
  </div>
  <div class="outer-ring"></div>
  <div class="outer-ring2"></div>
</body>
</html>

css3實現旋轉loadding載入效果
2017-03-11
CSSS3
css3實現的loadding載入動畫效果
2017-03-05
CSSS3動畫
CSS3實現的loadding載入等待效果
2017-02-17
CSSS3
css3實現的loadding旋轉載入效果
2017-02-24
CSSS3
CSS3 loadding載入效果
2018-05-20
CSSS3
CSS3 loadding載入動畫效果
2018-05-27
CSSS3動畫
canvas實現的絢麗的電子時鐘效果
2017-02-10
Canvas
CSS3實現絢麗的飄帶樣式選單
2016-03-12
CSSS3
css3實現的loadding載入動畫程式碼例項
2017-02-23
CSSS3動畫
利用html5實現的loadding動態載入效果
2017-03-22
HTML
CSS3 loadding載入程式碼
2018-08-02
CSSS3
CSS3漂亮的loadding載入動畫
2018-07-17
CSSS3動畫
canvas小球旋轉loadding載入效果
2017-03-14
Canvas
CSS3 loadding效果程式碼
2018-07-07
CSSS3
CSS3實現的頁面載入等待效果
2017-02-17
CSSS3
css3實現的旋轉載入等待效果
2017-02-22
CSSS3
純CSS3發光按鈕動畫非常絢麗
2016-02-27
CSSS3動畫
JQuery實現絢麗的橫向下拉選單
2021-09-09
jQuery
CSS3實現的小球旋轉載入等待效果
2017-02-17
CSSS3
近20個絢麗實用的jQuery/CSS3側邊欄選單
2015-10-10
jQueryCSSS3
絢麗風車loading動效分析與實現！
2019-03-02
超酷體驗絢麗的jQuery和CSS3應用外掛
2014-07-15
jQueryCSSS3
一個絢麗的downloading動效分析與實現！
2016-12-18
使用CSS3實現超炫的Loading（載入）動畫效果
2013-12-29
CSSS3動畫
CSS3載入等待動畫效果
2018-07-23
CSSS3動畫
6個絢麗時尚的前端3D效果及原始碼
2014-08-11
前端3D原始碼
9款超絢麗的HTML5/CSS3應用和動畫特效
2014-06-05
HTMLCSSS3動畫特效
CSS3旋轉載入等待效果
2018-09-19
CSSS3
javascript實現延遲載入效果
2017-03-17
JavaScript
css3實現翻牌效果
2017-12-14
CSSS3
不用圖片和JS 照樣建立絢麗的動態CSS3選單
2013-07-19
JSCSSS3
CSS3五連珠載入等待效果
2018-07-17
CSSS3
CSS3實現的環形旋轉載入補全效果程式碼例項
2017-02-19
CSSS3
css3點狀旋轉載入等待效果
2017-04-07
CSSS3
CSS3 螺紋載入進度條效果
2017-02-26
CSSS3
js和css3實現的載入等待特效
2017-04-17
JSCSSS3特效
css3實現動畫閃爍效果
2019-12-27
CSSS3動畫
css3實現元素垂直居中效果
2017-03-06
CSSS3

css3實現絢麗loadding載入效果

相關文章