首页 > Web开发 > 详细

CSS 加载动画

时间:2020-03-02 23:54:13      阅读:99      评论:0      收藏:0      [点我收藏+]

CSS加载动画

实现加载动画效果,需要的两个关键步骤:

1、做出环形外观

border:16px solid #f3f3f3;
 border-radius:50%;
 border-top:16px solid #2e8e9a;

技术分享图片

2、使环形转动 animation

  动画的实现使用 animation,animation  属性用来指定一组或多组动画,每组之间用逗号相隔,animation是一个简写属性。

每个动画定义中的属性值的顺序很重要:

可以被解析为 时间的值,单位毫秒 ms:

第一个值被分配给 animation-duration(指定一个动画周期时长),

第二个分配给 animation-delay(从动画应用在元素上到动画开始的这段时间的长度)。

每个动画定义中的值的顺序,对于区分 animation-name 值和其他关键字也很重要。

解析时,对于animation-name 之外的有效的关键字,必须被前面的简写中没有找到值的属性所接受。

此外,在序列化时,animation-name 与以及其他属性值作区分等情况下,必须输出其他属性的默认值。

例如:

animation:load 2s linear infinite;

上面简写代码可以分解为:

  animation-name 动画名称为 load;

  animation-duration 一个动画周期时长为 2s;

  animation-timing-function  在每一动画周期中执行的节奏为 linear;

  animation-timing-count  动画在结束前运行的次数为 infinite(无限次数)

注意使用厂商前缀 -webkit 或是-ms- 用于不支持 animation 和 transform 属性的浏览器。

HTML 代码

<div class=‘loader‘></div>

CSS代码

.loader{
            border:16px solid #f3f3f3;
            border-radius:50%;
            border-top:16px solid #2e8e9a;
            width:100px;
            height:100px;
            /* animation-name:load; */
            animation:load 2s linear infinite;
        }
        @keyframes load{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform:rotate(360deg);
            }
        }

实现效果:

技术分享图片

其他加载动画样式

主要是依靠变换边框的颜色

CSS代码

 .loader{
            border:16px solid #f3f3f3;
            border-color:#00ffff #00ccff #0099ff #0066ff;
            border-radius: 50%;
            width:100px;
            height:100px;
            animation:load 2s linear infinite;
        }
        @keyframes load{
            0%{
                transform:rotate(0deg);
            }
            100%{
                transform:rotate(360deg);
            }
        }

实现效果:

技术分享图片

 

 


参考资料:

https://www.runoob.com/css/css-examples.html

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

CSS 加载动画

原文:https://www.cnblogs.com/nyw1983/p/12398613.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!