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

最新推荐文章于 2022-02-13 16:09:55 发布
最新推荐文章于 2022-02-13 16:09:55 发布
阅读量204 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/621624
版权

最近在研究网页加载进度效果的时候发现可以使用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>
View Code

 

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

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

基础知识看完了，重新回到开始的问题：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>
View Code

注：

.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>
View Code

最终效果：

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

看看代码：

<!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>
View Code

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

 

 

参考：

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

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

 

weixin_34143774
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3中的@keyframes关键帧动画的选择器绑定
09-24
@keyframes可以帮助我们进行类似Flash中的关键帧动画制作,这里我们来简单讨论一下CSS3中的@keyframes关键帧动画的选择器绑定,需要的朋友可以参考下
CSS3（三）Animation 入门详解
热门推荐
CSDN前端知识共享
04-17 7万+
Animation 前言 好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。 下面是七喜的官方主页，它就是很好的富交互样例。鼠标移动到导航栏，就会播放多种动效，给用户一种酷炫的体验。我觉得用户体验，才是前端工程师更加关注的问题，而不是一味追求Javascript的编码技能。 七喜官方网站 A...
css3之关键帧的解说
点点的java小栈
08-03 2531
本文主要讲解CSS3中的关键帧的知识点，关键帧类似于animate动画的效果，但是关键帧是css的内容，可以省略掉js。
问题
The_Best_Hacker的博客
03-12 1994
问题描述： GET http://localhost:8080/jlk/css/xadmin.css [HTTP/1.1 200 0ms] GET http://localhost:8080/jlk/lib/layui/css/layui.css [HTTP/1.1 200 0ms] GET http://localhost:8080/jlk/lib/layui/css/layui.css...
css3关键帧
qq_43750360的博客
03-20 521
Keyframes定义 关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置。 使用说明 使用@Keyframes规则创建动画，通过逐渐改变从一个css样式设定到另一个。 在动画过程中可以通过@Keyframes规则多次更改css样式的设定。 语法 @Keyframes animationname{ //必写项，定义animation的名称。 keyframes-selecto...
CSS3动画关键帧
weixin_45249263的博客
02-13 717
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画及JavaScript。
详解CSS动画属性关键帧keyframes全解析
09-22
主要介绍了详解CSS动画属性关键帧keyframes全解析的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
[译]CSS3的关键帧动画(Keyframe Animations)简介
精彩人生
12-21 1757
你现在可能已经听说过基于关键帧语法的CSS3动画了。CSS3规范中的动画模块已经发布了几年了，而它也越来越显示出在WEB设计中扮演重要角色的巨大潜力。 开发者可以使用CSS3关键帧动画创建平滑，性能优异且易于维护的动画，而并不需要大量的脚本代码。这无疑是使用CSS3解决现实问题的又一种优雅的方案。如果你还没有开始学习CSS3动画的语法，那么就在CSS3规范正式完成之前开始充电吧。 本文中，我们
CSS3 @keyframe动画的基本用法与常见错误用法
Cherishor的博客
04-08 1万+
@keyframes + animation 常见错误用法与 已知BUG，动画性能优化。
CSS3 关键帧动画（@keyframes）
actorWen的博客
12-14 5836
在设计动画效果时，关键帧动画是一个很重要的功能，它设置了一段连续的动画。 1.关键帧动画（@keyframes） @keyframes语法：@keyframes: {{}} 其取值说明如下： :动画的名称。必须定义一个动画的名称，方便与动画属性animation绑定。 :动画持续时间的百分比，也可以是from和to。from对应的是0%，to对应的 是1
HTML5+CSS3技术应用完美解析
09-08
HTML5+CSS3技术应用完美解析 程序源代码
CSS3中的关键帧动画的实现
kjprime的博客
07-31 327
frame :帧,就是指连续的动画过程中某一个静止的画面 keyframe:关键帧,创建动画时,无需把每一帧都画出来,只需要指定开始和结束时若干个固定的重要的节点帧即可（称为关键帧) ,中间的过渡帧由系统自动补全。 创建和使用关键帧动画的过程: /*创建一个关键帧动画*/ @keyfram 动画名称{ 0%{属性名：值；} 15%{属性名：值；} 60%{属性名：值；} 100%{属性名：值；} } /*步骤2 :使用关键帧动画*/ div{ animation: xuan.
40.css3的关键帧
越努力越幸运的博客
05-04 110
这里直接贴代码了，跑一遍再看看代码基本上就懂了。 无非就是说一下，关键帧可以在每一帧中设置自己想要的属性，然后可以定义帧的长短等等。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关键帧</title> <style> .outer{ height: 500px;
CSS3 动画关键帧 @keyframes
歪脖先生的博客
02-23 2116
动画在CSS3中，通过 animation 属性来定义动画。虽然 transition 也可以实现从一种状态到另一种状态的动画效果，但它只能控制开始和结束的两个点，功能非常有限。而 animation 除了能控制开始和结束的两个点外，还能通过关键帧来控制动画的每一步，可以实现更为复杂的动画效果。CSS3中，animation 实现的动画由两个部分组成：首先，使用关键帧 @keyframes 来声明...
CSS3关键帧动画(animation keyframes)
ANGWH的博客
04-26 3684
关键帧动画animation 通过定义一段动画中的关键点、关键状态来创建动画。Keyframes相比transition对动画过程和细节有更强的控制 分为两步： 一、定义关键帧动画 @keyframes 动画名称{ 时间点 {元素状态} } 时间点可以用from (表示起始点) 和 to（表示终点）表示 也可以用百分比表示 0%~100%。 二、绑定关键帧动画 在需要添加动画的元素的css中添...
css3.0关键帧,详解CSS3中的@keyframes关键帧动画的选择器绑定
weixin_28763005的博客
08-04 548
在css3中，我们可以通过@keyframes创建关键帧动画效果。我们需要将@keyframes绑定到选择器中，否则不会有效果出现。同时，我们还需定义动画时长和动画名称语法@keyframes animationname {keyframes-selector {css-styles;}}值描述animationname必需。定义动画的名称。keyframes-selector必需。动画时长的百分...
CSS3动画animation相关属性与关键帧规则keyframes
尐轩web前端网络日志
11-23 7029
我昨天写三维正方体的时候，就用到了动画的语法 今天就来系统复习一下 过渡transition有着它的局限性 虽然简单，但是它只能在两个状态之间改变 并且它需要事件的驱动才能够进行 不能够自己运动 所以为了解决这样的问题 我们需要animation动画动画若想实现动画效果 仅仅有animation属性是不够的 我们还需要@keyframes规则 先来看一个例子div class="
css3关键帧 keyframs语法
Super的专栏
05-20 1635
详情
HTML+CSS3 关键帧设置图片动画
weixin_44542781的博客
01-31 6414
这个案例是利用关键帧来设置背景图片的动画效果，通过关键帧给外层的飞机图片设置了旋转的效果，以及中间部分的背景图片的缩放与切换效果，并且的图片切换的同时有淡入淡出效果。 效果图： HTML部分： 在body里面添加一个外层的大盒子，用来包裹里面的元素，并且设置了一个类名div1。 在div1放入圆形的飞机图片； 再设置一个div，要与上面的图片是平级关系。 HTML代码： CSS部分： 设...
CSS3 动画关键帧
最新发布
04-18
CSS3动画关键帧是指在CSS3中定义动画效果的关键帧。通过在关键帧中定义元素的样式属性，可以实现元素在不同时间点上的不同样式，从而创建出流畅的动画效果。 在CSS3中，我们可以使用@keyframes规则来定义动画关键帧...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值