css3 loading加载动画

原创 2018年04月16日 11:09:13

css:

.spinner {
  margin-top: 100px;
    margin-right: auto;
    margin-bottom: 100px;
    margin-left: auto;
  width: 50px;
  height: 50px;
  position: relative;
}

.container1 > div, .container2 > div, .container3 > div {
  width: 12px;
  height: 12px;
  background-color: #FF0000;

  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

html:

<div class="um-win" id="index">
            <div class="um-header">
                <h3>导航栏</h3>
            </div>

            <div class="um-content">
                <div class="spinner">
                    <div class="spinner-container container1">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                    <div class="spinner-container container2">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                    <div class="spinner-container container3">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                </div>
            </div>
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_37103514/article/details/79958030

css3实现三种不同的loading加载动画效果

HTML:
  • web_hwg
  • web_hwg
  • 2017年03月31日 16:40
  • 1788

使用CSS3实现超炫的Loading(加载)动画效果

效果及源码:点击打开链接 sfgsskklsksksksksks
  • amohan
  • amohan
  • 2015年05月25日 12:45
  • 1687

纯css3 加载loading动画特效

最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好。于是就采用css3+js实现这个loading...
  • u012151556
  • u012151556
  • 2016年11月23日 10:17
  • 1015

css3实现圆形进度加载动画

使用到的css3属性有border-radius,transform,animation,clip等,在这里着重讲一下clip这个属性。因为博主也是第一次用这个属性。。。 这个属性就是规定盒子内显示的...
  • qq_30100043
  • qq_30100043
  • 2017年07月18日 16:01
  • 1485

动感的CSS3 Loading加载文字动画特效

动感的CSS3 Loading加载文字动画特效 源代码下载地址:http://www.zuidaima.com/share/1795599439350784.htm...
  • yaerfeng
  • yaerfeng
  • 2016年05月29日 11:48
  • 2787

css3 加载loading图标实现

常见的loading图标,大概的样子是这样:(录制的gif,比较卡) 看到大牛的面试中被问到这个问题,我就想自己动手实现一下。我们来用20行代码实现一下。 代码如下: 加载效果 ...
  • Maci_yera
  • Maci_yera
  • 2017年08月27日 00:34
  • 1108

30种CSS3炫酷页面预加载loading动画特效

这是一组效果非常炫酷的CSS3页面预加载loading动画特效。该特效共有30种不同的loading效果。所有的加载动画都是使用CSS3来完成,jQurey代码只是用于隐藏加载动画。当你点击页面的任何...
  • souhugirl
  • souhugirl
  • 2015年04月16日 12:46
  • 1596

CSS3实现Loading加载动画特效大全

目前大部分WEB开发加载(loading)特效是采用gif图片形式展现,随着HTML5+CSS3技术的成熟,纯CSS3版本的Loading加载动画效果已经可以比拟gif动画效果,当然是需要浏览器的兼容...
  • u013683592
  • u013683592
  • 2014年02月17日 17:17
  • 928

纯CSS3实现的8种Loading动画效果

加载中          我们从左到右从上到下列出效果对应的CSS代码。 1#效果CSS代码: .load1 .loader, .load1 .loader:before, ....
  • dududu01
  • dududu01
  • 2015年08月05日 16:59
  • 961

CSS3动画实现loading加载图标

CSS3动画实现loading加载图标,并利用JavaScript封装成插件,方便以后调用。
  • yhb241
  • yhb241
  • 2015年08月03日 16:34
  • 1111
收藏助手
不良信息举报
您举报文章:css3 loading加载动画
举报原因:
原因补充:

(最多只允许输入30个字)