脚本宝典收集整理的这篇文章主要介绍了

10组蓝色风格的纯CSS3 Loading动画图标DEMO演示

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

前段时间提供了?5个可爱的CSS3 Loading加载动画DEMO演示?,今天大家带来10组蓝色风格的纯CSS3 Loading动画图标DEMO演示

10组蓝色风格的纯CSS3 Loading动画图标DEMO演示-脚本宝典

html代码

CSS3 Loading animations

Loading 1

Loading 2

Loading 3

Loading 4

Loading 5

Loading 6

L
o
a
d
i
n
g
.
.
.

Loading 7

Loading 8

Loading 9

Loading 10

css代码

.load-1 .line:nth-last-child(1) {animation: loadingA 1.5s 1s infinite;}
.load-1 .line:nth-last-child(2) {animation: loadingA 1.5s .5s infinite;}
.load-1 .line:nth-last-child(3) {animation: loadingA 1.5s 0s infinite;}

.load-2 .line:nth-last-child(1) {animation: loadingB 1.5s 1s infinite;}
.load-2 .line:nth-last-child(2) {animation: loadingB 1.5s .5s infinite;}
.load-2 .line:nth-last-child(3) {animation: loadingB 1.5s 0s infinite;}

.load-3 .line:nth-last-child(1) {animation: loadingC .6s .1s linear infinite;}
.load-3 .line:nth-last-child(2) {animation: loadingC .6s .2s linear infinite;}
.load-3 .line:nth-last-child(3) {animation: loadingC .6s .3s linear infinite;}

.load-4 .ring-1 {animation: loadingD 1.5s .3s cubic-bezier(.17,.37,.43,.67) infinite;}

.load-5 .ball-holder {animation: loadingE 1.3s linear infinite;}

.load-6 .letter {
    animation-name: loadingF;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-direction: linear;
}

.l-1 {animation-delay: .48s;}
.l-2 {animation-delay: .6s;}
.l-3 {animation-delay: .72s;}
.l-4 {animation-delay: .84s;}
.l-5 {animation-delay: .96s;}
.l-6 {animation-delay: 1.08s;}
.l-7 {animation-delay: 1.2s;}
.l-8 {animation-delay: 1.32s;}
.l-9 {animation-delay: 1.44s;}
.l-10 {animation-delay: 1.56s;}

.load-7 .square {animation: loadingG 1.5s cubic-bezier(.17,.37,.43,.67) infinite;}

.load-8 .line {animation: loadingH 1.5s cubic-bezier(.17,.37,.43,.67) infinite;}

.load-9 .spinner {animation: loadingI 2s linear infinite;}
.load-9 .bubble-1, .load-9 .bubble-2 {animation: bounce 2s ease-in-out infinite;}
.load-9 .bubble-2 {animation-delay: -1.0s;}

.load-10 .bar {animation: loadingJ 2s cubic-bezier(.17,.37,.43,.67) infinite;}

@keyframes loadingA {
    0 {height: 15px;}
    50% {height: 35px;}
    100% {height: 15px;}
}

@keyframes loadingB {
    0 {width: 15px;}
    50% {width: 35px;}
    100% {width: 15px;}
}

@keyframes loadingC {
    0 {transform: translate(0,0);}
    50% {transform: translate(0,15px);}
    100% {transform: translate(0,0);}
}

@keyframes loadingD {
    0 {transform: rotate(0deg);}
    50% {transform: rotate(180deg);}
    100% {transform: rotate(360deg);}
}

@keyframes loadingE {
    0 {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

@keyframes loadingF {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes loadingG {
    0% {transform: translate(0,0) rotate(0deg);}
    50% {transform: translate(70px,0) rotate(360deg);}
    100% {transform: translate(0,0) rotate(0deg);}
}

@keyframes loadingH {
    0% {width: 15px;}
    50% {width: 35px; padding: 4px;}
    100% {width: 15px;}
}

@keyframes loadingI {
    100% {transform: rotate(360deg);}
}

@keyframes bounce  {
  0%, 100% {transform: scale(0.0);}
  50% {transform: scale(1.0);}
}

@keyframes loadingJ {
  0%,100% {transform: translate(0,0);}
  
  50% {
      transform: translate(80px,0);
      background-color: #f5634a;
      width: 25px;
  }
}

链接:https://pan.baidu.com/s/1sjbyjh4fOhGmyrzDbjhWqg

复制这段内容后打开百度网盘手机App,操作更方便哦


总结

以上是脚本宝典为你收集整理的

10组蓝色风格的纯CSS3 Loading动画图标DEMO演示

全部内容,希望文章能够帮你解决

10组蓝色风格的纯CSS3 Loading动画图标DEMO演示

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过