纯CSS实现预加载动画效果


Posted in HTML / CSS onSeptember 06, 2017

效果图

纯CSS实现预加载动画效果

下载地址:http://xiazai.3water.com/201709/yuanma/css_loading_3water.rar

<style>
    #loading {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background: #121220;
        overflow:hidden;
        z-index:9999;
    }
    /*加载圈*/
    .spinner {
        margin:0 auto;
        width:60px;
        height:60px;
        position:relative;
        top:40%;
    }
    .container1 > div,.container2 > div,.container3 > div {
        width:15px;
        height:15px;
        background-color:#fff;
        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);
        }
    }
</style>
<body>
    <div id="loading" >
        <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>
</body>

总结

以上所述是小编给大家介绍的纯CSS实现预加载动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
HTML5 CSS3给网站设计带来出色效果
Jul 16 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
使用CSS3制作倾斜导航条和毛玻璃效果
Sep 12 #HTML / CSS
分享8款纯CSS3实现的搜索框功能
Sep 14 #HTML / CSS
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 #HTML / CSS
详解使用CSS3的@media来编写响应式的页面
Nov 01 #HTML / CSS
CSS3轻松实现圆角效果
Nov 09 #HTML / CSS
详解css3自定义滚动条样式写法
Dec 25 #HTML / CSS
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 #HTML / CSS
You might like
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
进一步理解Python中的函数编程
2015/04/13 Python
django实现前后台交互实例
2017/08/07 Python
解决Django中多条件查询的问题
2019/07/18 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
Python列表推导式实现代码实例
2020/09/09 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
Python中生成ndarray实例讲解
2021/02/22 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
创先争优一句话承诺
2014/05/29 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
MySQL Server 层四个日志
2022/03/31 MySQL
python实现学生信息管理系统(面向对象)
2022/06/05 Python