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 名称。。
animati o n-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>