css3實現絢麗loadding載入效果

antzone發表於2017-03-13

原文網址 : https://www.softwhy.com/article-3105-1.html

分享一段程式碼例項，它實現了非常絢麗的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載入效果
2018-05-20
CSSS3
CSS3 loadding載入動畫效果
2018-05-27
CSSS3動畫
CSS3 loadding載入程式碼
2018-08-02
CSSS3
CSS3 loadding效果程式碼
2018-07-07
CSSS3
CSS3漂亮的loadding載入動畫
2018-07-17
CSSS3動畫
絢麗風車loading動效分析與實現！
2019-03-02
JQuery實現絢麗的橫向下拉選單
2021-09-09
jQuery
CSS3旋轉載入等待效果
2018-09-19
CSSS3
CSS3載入等待動畫效果
2018-07-23
CSSS3動畫
CSS3五連珠載入等待效果
2018-07-17
CSSS3
CSS3實現多種背景效果
2018-05-06
CSSS3
CSS3 loadding旋轉等待動畫
2018-06-08
CSSS3動畫
CSS3實現3D魔方效果
2019-03-06
CSSS33D
CSS3實現3D翻牌效果
2018-06-07
CSSS33D
css3實現動畫閃爍效果
2019-12-27
CSSS3動畫
CSS3實現原型進度條效果
2021-09-09
CSSS3原型
CSS3實現多樣的邊框效果
2018-05-03
CSSS3
CSS3實現3d效果照片牆
2020-12-26
CSSS33D
新華三用科技讓體彩更“絢麗”
2018-05-11
純CSS3屬性animation實現的打字效果
2018-04-23
CSSS3
CSS3實現王者榮耀匹配人員載入頁面
2019-04-09
CSSS3
vue中頁面載入進度條效果的實現
2018-06-26
Vue
CSS3現菱形效果程式碼
2018-07-22
CSSS3
CSS3實現王者匹配時的粒子動畫效果
2019-04-09
CSSS3動畫
棒呆！如何用css3實現煙花綻放效果
2018-06-12
CSSS3
使用css3實現一個斑馬線的效果
2024-12-03
CSSS3
css3帶你實現3D轉換效果
2022-03-01
CSSS33D
CSS3 - vue中純css實現柱狀圖表效果
2019-07-05
CSSS3Vue
使用css3實現小車行駛的動畫效果
2024-12-10
CSSS3動畫
小tip-一種圖片載入狀態效果的實現
2018-11-05
成品直播原始碼推薦，實現文字載入效果文字跳動
2023-11-30
原始碼
Android 載入網路圖片以及實現圓角圖片效果
2020-12-05
Android
CSS3動畫實現3D倒數計時效果
2018-08-01
CSSS3動畫3D
CSS3中用background-image實現粒子動畫效果
2021-09-09
CSSS3動畫
前端實現彈幕效果的方法總結(包含css3和canvas的實現方式)
2018-07-10
前端CSSS3Canvas
CSS3象棋效果
2018-07-02
CSSS3
超級絢麗，16款前端動畫特效，轟炸你的眼睛
2018-04-25
前端動畫特效
《三國志》那些恢弘絢麗的封面，背後是這位功臣
2019-10-21
美麗的閉包,在js中實現函式過載
2018-06-16
JS函式

css3實現絢麗loadding載入效果

相關文章