css3中的关键帧技术分析应用

最近在研究网页加载进度效果的时候发现可以使用css3实现这个效果。

使用css3实现完全不需要图片,相比使用loading.gif的实现来说可能更快。

使用css3实现动态加载的效果，主要会涉及到几个关键的css3属性和概念:animate属性,keyframes关键帧概念。

先看看animate属性的使用：

div

{

animation:mymove 5s infinite; /*infinite表示循环运行*/

-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */

}

注：其中mymove是自己定义的动画帧，5s是整个动画的秒数，infinite是动画永久循环运行

animation 属性是一个简写属性，用于设置六个动画属性：

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

上面提到的keyframe就是关键帧：

@keyframes 让开发者通过指定动画中特定时间点必须展现的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理。

@keyframes 可以通过 CSS对象模型接口（CSS object model interface ）来访问 CSSKeyframesRule.

要使用关键帧, 先创建一个带名称的@keyframes规则，以便后续使用 animation-name 这个属性来调用指定的@keyframes. 每个@keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

关键帧的编写顺序没有要求，最后只会根据百分比按由小到大的顺序触发。

为了让一个关键帧列表有效，它必须至少包含了对0%（或from）和100%（或to）即动画的开头帧和结束帧的定义。如果都没有进行定义，那么整个@keyframes 是无效的，不能使用。

如果在关键帧的样式中使用了不能用作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及。

如果多个关键帧使用同一个名称，以最后一次定义的为准。 @keyframes 不存在层叠样式(cascade)的情况，所以动画在一个时刻（阶段）只会使用一个的关键帧的数据。

如果一个@keyframes 里的关键帧的百分比存在重复的情况，以最后一次定义的关键帧为准。因为@keyframes 的规则不存在层叠样式(cascade)的情况，即使多个关键帧设置相同的百分值也不会全部执行。

关键帧中出现的 !important 关键词将会被忽略

看一个animate+keyframes的使用实例：

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

}

@keyframes mymove

{

from {left:0px;}

to {left:200px;}

}

@-webkit-keyframes mymove /*Safari and Chrome*/

{

from {left:0px;}

to {left:200px;}

}

</style>

</head>

<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>

<div></div>

</body>

</html>

最终效果就是红色正方形平行移动，以此往复。

----------------------------------------------------------------------

基础知识看完了，重新回到开始的问题：css3的加载效果

下面给一个实例：

最终效果是这样的：

直接看代码了:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3进度条</title>

    <style>

        *{margin:0;padding:0}

        .loading{width: 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 100;background-color: white;}

        .loading .pic{width:50px;height:50px;position: absolute;left: 0;top:0;bottom:0;right: 0;margin: auto;}

        .loading .pic i{

            display: block;width: 6px;height: 50px;background-color: #399;float: left;margin: 0 2px;

            -webkit-transform: scaleY(0.4);

            -ms-transform: scaleY(0.4);

            transform: scaleY(0.4);

            -webkit-animation: loading 1.2s infinite;

            animation: loading 1.2s infinite

        }

        .loading .pic i:nth-child(1){}

        .loading .pic i:nth-child(2){-webkit-animation-delay: 0.1s;animation-delay: 0.1s}

        .loading .pic i:nth-child(3){-webkit-animation-delay: 0.2s;animation-delay: 0.2s}

        .loading .pic i:nth-child(4){-webkit-animation-delay: 0.3s;animation-delay: 0.3s}

        .loading .pic i:nth-child(5){-webkit-animation-delay: 0.4s;animation-delay: 0.4s}

        @-webkit-keyframes loading {

            0%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}

            20%{-webkit-transform: scaleY(1);transform: scaleY(1)}

            50%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}

            100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}

        }

        @keyframes loading {

            0%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}

            20%{-webkit-transform: scaleY(1);transform: scaleY(1)}

            50%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}

            100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}

        }

    </style>

</head>

<body>

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>

    document.onreadystatechange = function () {

        if(document.readyState == 'complete'){

            $('.loading').fadeOut();

        }

    }

</script>

<div class="loading">

    <div class="pic">

        <i></i>

        <i></i>

        <i></i>

        <i></i>

        <i></i>

    </div>

</div>

<div style="width:1000px;margin:0 auto;">

<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg" style="width:400px;height:500px">

<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg" style="width:400px;height:500px">

<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg" style="width:400px;height:500px">

<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg" style="width:400px;height:500px">

<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg" style="width:400px;height:500px">

<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg" style="width:400px;height:500px">

</div>

</body>

</html>

注：

.loading .pic i:nth-child(1) 表示：.loading .pic下的第一个I子元素

animation-delay: 0.1s表示：延迟0.1s执行

transform: scaleY(0.4)表示：纵向变化为原高度的0.4倍

前面加上-webkit-表示：适配Safari 和 Chrome 浏览器

　　　　　　　　　　　　-moz代表firefox浏览器私有属性
　　　　　　　　　　　　-ms代表IE浏览器私有属性
　　　　　　　　　　　　-webkit代表chrome、safari私有属性

这个实例是在document加载完后隐藏loading 来实现的。

由此拓展开来，是否能根据实际加载情况来制作一个loading进度?答案是肯定的

看看代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>实时加载进度</title>

    <style>

        *{padding: 0;margin: 0;}

        .loading{width: 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 100;background-color: white;}

        .loading .pic{width:80px;height:80px;position: absolute;left: 0;top:0;right:0;bottom:0;margin:auto;text-align: center;}

        .loading .pic span{width: 60px;height: 60px; position: absolute;left: 10px;top:10px;

            border-radius: 50%;box-shadow: 0 3px 0 #666;animation: rotate 0.5s infinite linear;-webkit-animation:

                rotate 0.5s infinite linear}

        .loading .pic b{

            font-size: 25px;line-height: 80px;

        }

        @keyframes rotate {

            0%{transform: rotate(0deg);}

            100%{transform: rotate(360deg);}

        }

        @-webkit-keyframes  {

            0%{-webkit-transform: rotate(0deg);}

            100%{-webkit-transform: rotate(360deg);}

        }

    </style>

    <script src="js/jquery-3.2.1.min.js"></script>

    <script>

        $(function(){

            var img = $('img');

            var num = 0;

            img.each(function(i){

                var oImg = new Image();

                oImg.onload = function(){

                    oImg.onload = null;

                    num++;

                    $('.loading .pic b').html(Math.ceil(num/$('img').length*100)+"%");

                    console.log(Math.ceil(num/$('img').length*100)+"%");

                    if (num >= $('img').length) {//判断所有图像加载完成的条件

                        $('.loading').fadeOut();

                    }

                };

                oImg.src=img[i].src;

                })})

    </script>

</head>

<body>

<div class="loading">

<div class="pic">

    <span></span>

    <b>0%</b>

</div>

</div>

<img src="https://ws1.sinaimg.cn/large/9150e4e5ly1fkfuf0ndhhj20dc0dcdgi.jpg">

<img src="https://ws2.sinaimg.cn/large/9150e4e5ly1fkfuf2sajaj20dc0dcq3f.jpg">

<img src="https://ws2.sinaimg.cn/large/9150e4e5ly1fkfuf4wbzmj20dc0dcdgo.jpg">

<img src="https://ws2.sinaimg.cn/large/9150e4e5ly1fkfuf8tkpjj20dc0dc74w.jpg">

<img src="https://ws2.sinaimg.cn/large/9150e4e5ly1fkfuf8tkpjj20dc0dc74w.jpg">

<img src="https://ws1.sinaimg.cn/large/9150e4e5ly1fkfufar2azj20dc0dcjs6.jpg">

<img src="https://ws2.sinaimg.cn/large/9150e4e5ly1fkfufcvly4j20dc0dct94.jpg">

<img src="https://ws1.sinaimg.cn/large/9150e4e5ly1fkfufgsduyj20dc0dc0t5.jpg">

<img src="https://ws1.sinaimg.cn/large/9150e4e5ly1fkfufgsduyj20dc0dc0t5.jpg">

<img src="https://ws1.sinaimg.cn/large/9150e4e5ly1fkfufgsduyj20dc0dc0t5.jpg">

</body>

</html>

最终效果：

最后再放一个例子：也是现在见得比较多的一种加载效果，网页头部加载效果

看看代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>定位在头部的进度条</title>

    <style>

        *{padding: 0;margin: 0;}

        .loading{width: 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 100;background-color: white;}

        .loading .pic{width:0;height:4px;position: absolute;left: 0;top:0;background-color: #6495ED;}

    </style>

</head>

<body>

<div class="loading"> <div class="pic"></div></div>

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

<header>

    <img src="https://ws1.sinaimg.cn/large/9150e4e5ly1fkfuf0ndhhj20dc0dcdgi.jpg">

    <img src="https://ws2.sinaimg.cn/large/9150e4e5ly1fkfuf2sajaj20dc0dcq3f.jpg">

</header>

<section class="new">

    <img src="https://ws2.sinaimg.cn/large/9150e4e5ly1fkfuf8tkpjj20dc0dc74w.jpg">

    <img src="https://ws1.sinaimg.cn/large/9150e4e5ly1fkfufar2azj20dc0dcjs6.jpg">

    <img src="https://ws2.sinaimg.cn/large/9150e4e5ly1fkfuf4wbzmj20dc0dcdgo.jpg">

    <img src="https://ws2.sinaimg.cn/large/9150e4e5ly1fkfuf8tkpjj20dc0dc74w.jpg">

    <img src="https://ws2.sinaimg.cn/large/9150e4e5ly1fkfufcvly4j20dc0dct94.jpg">

    <img src="https://ws1.sinaimg.cn/large/9150e4e5ly1fkfufgsduyj20dc0dc0t5.jpg">

    <img src="https://ws2.sinaimg.cn/large/9150e4e5ly1fkfufcvly4j20dc0dct94.jpg">

    <img src="https://ws1.sinaimg.cn/large/9150e4e5ly1fkfufgsduyj20dc0dc0t5.jpg">

    <img src="https://ws2.sinaimg.cn/large/9150e4e5ly1fkfufcvly4j20dc0dct94.jpg">

    <img src="https://ws1.sinaimg.cn/large/9150e4e5ly1fkfufgsduyj20dc0dc0t5.jpg">

</section>

<script>

    //$(".loading .pic").animate({width:'90%'},100)

</script>

<footer>

</footer>

<script>

    $(".loading .pic").animate({width:'100%'},100,function () {

        $(".loading").fadeOut();

    })

    $(function(){

            var img = $('img');

            var num = 0;

            img.each(function(i){

                var oImg = new Image();

                oImg.onload = function(){

                    oImg.onload = null;

                    num++;

                    $(".loading .pic").animate({width:Math.ceil(num/$('img').length*100)+"%"},100);

                    console.log(Math.ceil(num/$('img').length*100)+"%");

                    if (num >= $('img').length) {//判断所有图像加载完成的条件

                        $('.loading').fadeOut();

                    }

                };

                oImg.src=img[i].src;

                })})

</script>

</body>

</html>

到此，关于css3的加载方法介绍完毕。

参考：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes

http://www.cnblogs.com/qikeyishu/p/7637773.html

css3中的关键帧技术分析应用的更多相关文章

WANNACRY病毒中的加密技术分析
WANNACRY病毒中的加密技术分析 2019/11/6 16:56:46 分析WANNACRY病毒中的加解密技术的应用.分析内容包括但不限于:对称密码技术和公钥密码技术的作用:受害者支付赎金后就会恢 ...
CSS3中新出现的技术
CSS3中新出现的技术 CSS媒体查询媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定 ...
NetSarang软件中nssock2.dll模块被植入恶意代码技术分析与防护方案
原文地址:http://blog.nsfocus.net/nssock2-dll-module-malicious-code-analysis-report/ NetSarang是一家提供安全连接解决 ...
CSS3中的弹性流体盒模型技术详解
先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局. 其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去 ...
CSS3中动画属性transform、transition和animation
Transform:变形在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
iOS直播的技术分析与实现
HTTP Live Streaming直播(iOS直播)技术分析与实现发布于:2014-05-28 13:30阅读数:12004 HTTP Live Streaming直播(iOS直播)技术分析与实 ...
转： HTTP Live Streaming直播(iOS直播)技术分析与实现
http://www.cnblogs.com/haibindev/archive/2013/01/30/2880764.html HTTP Live Streaming直播(iOS直播)技术分析与实现 ...
css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
【转】HTTP Live Streaming直播（iOS直播）技术分析与实现
HTTP Live Streaming直播(iOS直播)技术分析与实现不经意间发现,大半年没写博客了,自觉汗颜.实则2012后半年,家中的事一样接着一样发生,实在是没有时间.快过年了,总算忙里偷闲, ...

随机推荐

Linux(CentOS6.5)下Nginx注册系统服务(启动、停止、重启、重载等)&设置开机自启
本文地址http://comexchan.cnblogs.com/ ,作者Comex Chan,尊重知识产权,转载请注明出处,谢谢! 完成了Nginx的编译安装后,仅仅是能支持Nginx最基本的功能, ...
聊聊API网关的作用
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.5px "Trebuchet MS" } p.p2 { margin: 0.0px ...
pagelatch等待在tempdb的gsm页面上
Each data file has a gam page, sql will update it when allocate space in the file. Will see contenti ...
node 使用koa2 异步读文件
目的:在一个文件夹(image)中有很多文件夹和文件,排除掉文件,将所有文件夹找出来知识点: async 函数与 await .只有在async函数内部,才能使用await,await等的必须是p ...
git上传文件到github
一.git之上传代码到github. 安装git,这个就不说了,很多帖子都有详细说明. 二.新建仓库,GitHub上的,首先申请账号. 三.本地选择地方新建本地仓库. 建完本地仓库文件夹,在本地 ...
Java异常的正确使用姿势
最近在项目代码中,遇见异常滥用的情形,会带来什么样的后果呢? 1. 代码可读性变差,业务逻辑难以理解异常流与业务状态流混在一起,无法从接口协议层面理解业务代码,只能深入到方法(Method)内部才能 ...
php echo和print_r和var_dump的区别
echo -- 适合打印单数据整型字符串浮点型 print_r -- 适合打印符合数据数组资源对象 var_dump -- 适合调试变量打印特许的类型如BOOL NULL 不仅能把值打印 ...
python正则详解
正则表达式概述正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达式.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),是计算机科学的 ...
File System 定额（配额查询）
不多说,在弄一个基于FileSytem/IndexedDB的小应用,目前处于基础开发阶段, 我们在使用FileSystem的时候无疑是需要知道浏览器的定额(配额的),怎么去查询,当然可以查询 Quot ...
【python3之变量，输入输出，判断，循环】
一.python的基础语法和规则 1.变量 ①.变量的命名规则语法: (下划线或字母)+(任意数目的字母.数字或下划线) 变量名必须以下划线或字母开头,而后面接任意数目的字母.数字或下划线.下划线分 ...

css3中的关键帧技术分析应用

css3中的关键帧技术分析应用的更多相关文章

随机推荐

热门专题