纯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 相关文章推荐
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
使用CSS实现阅读进度条
Feb 27 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 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
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
vue组件间通信解析
2017/03/01 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
Python中的闭包总结
2014/09/18 Python
探究Python中isalnum()方法的使用
2015/05/18 Python
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
五种Python转义表示法
2020/11/27 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
廉洁使者实施方案
2014/03/29 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
大学生党性分析材料
2014/12/19 职场文书
绿色环保倡议书
2015/04/28 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL