纯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实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 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
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
python调用shell的方法
2013/11/20 Python
Python中几个比较常见的名词解释
2015/07/04 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
python3个性签名设计实现代码
2018/06/19 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
python中提高pip install速度
2020/02/14 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
材料会计岗位职责
2014/03/06 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
2014和解协议书范文
2014/09/15 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
redis 解决库存并发问题实现数量控制
2022/04/08 Redis