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后半年,家中的事一样接着一样发生,实在是没有时间.快过年了,总算忙里偷闲, ...

随机推荐

java方向及学习方法
随笔:由于回首最近刚刚上班的缘故,平时基本没时间上播客了,所以回首会定期的抽时间分享一些干货给朋友们,就是周期不会像之前那么频繁了.最近有朋友跟回首说想没事儿的时候自学Java,但苦于不知道怎么去学, ...
动态求区间K大值（权值线段树）
我们知道我们可以通过主席树来维护静态区间第K大值.我们又知道主席树满足可加性,所以我们可以用树状数组来维护主席树,树状数组的每一个节点都可以开一颗主席树,然后一起做. 我们注意到树状数组的每一棵树都和 ...
win10 音频服务未响应的解决方法
最近在调试usb audio设备,由于使用的是自己的audio 设备,所以要频繁的更换采样率,可是在win10中经常出现一些莫名其妙的问题,今天这个问题就是折腾了我好久才搞定的. 当把usb aud ...
程序包管理rpm、yum与简单编译安装程序
Linux程序包管理 Linux中软件的安装主要有两种形式:一种是直接下载源代码包自行编译后安装,另一种直接获取rpm软件包进行安装. 程序的组成部分: 二进制程序:程序的主体文件,比如我们运行一个l ...
简易排水简车的制作 TurnipBit 系列教程
准备工作 ü TurnipBit 开发板 1块 ü 下载数据线 1条 ü 微型步进电机(28BYJ-48) 1个 ü 步进电机驱动板(ULN2003APG) 1块 ü TurnipBit 扩展板 ...
TPYBoard V102：能跑Python的stm32开发板
近来micropython语言做硬件编程很火,随之而来的就开始带动着支持micropython语言编程的开发板也开始火的发烫,今天小编就来和大家介绍一款很经典的micropython开发板-TPYBo ...
Sequelize 基本操作
Sequelize 是 Node 的一个 ORM(Object-Relational Mapping) 框架,用来方便数据库操作. 配置 sequelize 以 mysql 为例首先我们要引入npm ...
文字太多？控件太小？试试 TextView 的新特性 Autosizeing 吧！
Hi,大家好,我是承香墨影! Android 8.0 已经发布了有一阵子了,如果你有在关注它,你应该会知道它新增了一个对于 TextView 字体大小变动的新特性:Autosizing. 本身这个新特 ...
.net 下发送calendar
前段时间公司系统中有一块需要发送邮件calendar outlook可以接受查看calendar 发送outlook主要是有rrule脚本的边界网上找过一些资料,主要有两种实现方式 1.一种是已ic ...
入门干货之Grpc的.Net实现-MagicOnion
此文章简单残暴,学习成本较低,你可以跟着我一起撸代码,一起吐槽,一起砸键盘.以下操作均为 core2.0 环境. 0x01.Grpc 1.介绍 Google主导开发的RPC框架,使用HTTP/2协议 ...

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

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

随机推荐

热门专题