纯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实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 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
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
Python isinstance判断对象类型
2008/09/06 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
python交互模式基础知识点学习
2020/06/18 Python
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
兼职业务员岗位职责
2014/01/01 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
致运动员的广播稿
2015/08/19 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript