纯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媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
css3带你实现3D转换效果
Feb 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
一个简单的网页密码登陆php代码
2012/07/17 PHP
php文件上传简单实现方法
2015/01/24 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
jQuery动态添加
2016/04/07 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
入学生会自荐书范文
2014/02/05 职场文书
党员干部承诺书范文
2014/03/25 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
交通事故和解协议书
2014/09/25 职场文书
实习护士自荐信
2015/03/25 职场文书
小学班主任研修日志
2015/11/13 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
使用tensorflow 实现反向传播求导
2021/05/26 Python
PO模式在selenium自动化测试框架的优势
2022/03/20 Python
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技