利用CSS实现“正在载入”动画效果
by 毛三胖 on 2018年02月19日
阅:441赞:9

概要及核心程序

利用CSS3实现“正在载入”的动画效果,如果您担心浏览器支持问题,请使用GIF图片。

@keyframes loader {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0.9;
        -moz-transform: translateY(0);
    }
    100% {
        width: 24px;
        height: 24px;
        opacity: 0.1;
        -moz-transform: translateY(-21px);
    }
}

演示

说明

利用CSS3实现“正在载入”的动画效果,如果您担心浏览器支持问题,请使用GIF图片。

GIF图生成工具-ajaxload.info

CSS3 基本动画属性

属性 描述
@keyframes 规定动画。
animation 所有动画属性的简写属性,除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。

程序说明

animation: loader 0.9s infinite alternate;

上述指令指定动画名称为loader,一个周期为0.9秒,无限次播放,animation-direction 值是 "alternate",则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。

transform: translateY(-21px)

上述指令规定元素转换向Y轴反向移动21PX。

具体坐标如下:

translateY-42du.cn

参考

css-tricks.com

animation - CSS | MDN

$ 热门标签
$ 贴士
简单是稳定的前提。 -Edsger Dijkstra
$ 声明
本站所有代码及文字都是作者精心汇编整理而成,转载代码及文字请明确注明出处和作者名称。