纯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圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
CSS3实现指纹特效代码
Mar 17 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
激活 ActiveX 控件
2006/10/09 Javascript
html读出文本文件内容
2007/01/22 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
python创建和删除目录的方法
2015/04/29 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
python 自动批量打开网页的示例
2019/02/21 Python
python生成并处理uuid的实现方式
2020/03/03 Python
Django实现celery定时任务过程解析
2020/04/21 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
员工拓展培训方案
2014/02/15 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫