更新日期: 2018-04-24阅读: 4k标签: css3动画分享

复制链接

新浪微博

QQ 好友

扫一扫分享

曾经以为，loading的制作需要一些比较高深的web动画技术，后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静止图像，然后让它旋转就完了。gif图也可以，但是加载时间比较长。css的animation可以做出大多数的loading，比如：

loading1：

1、html：

<div id="ddr">
    <div class="ddr ddr1"></div>
    <div class="ddr ddr2"></div>
    <div class="ddr ddr3"></div>
    <div class="ddr ddr4"></div>
    <div class="ddr ddr5"></div>
</div>

2、CSS

#ddr{
    margin: 0 auto;
    width: 70px;
    height: 120px;
}
.ddr{
    width: 10px;
    height: 120px;
    float: left;
    margin: 2px;
    background-color: #00ff00;
    animation: loading 1s infinite ease-in-out;/*animation：动画名称 持续时间 动画速度曲线 延迟 执行多少次 是否正反方向轮流播放*/
}
.ddr2{
    animation-delay: -0.9s;/*定义开始执行的地方，负号表示直接从第900ms开始执行*/
}
.ddr3{
    animation-delay: -0.8s;
}
.ddr4{
    animation-delay: -0.7s;
}
.ddr5{
    animation-delay: -0.6s;
}
@keyframes loading {
    0%,40%,100%{ /*定义每帧的动作*/
        -webkit-transform: scaleY(0.5);
    }
    20%{
        -webkit-transform: scaleY(1);
    }
}

loading2：

1、HTML：

<div id="circle"></div>

2、CSS：

#circle{
    margin: 20px auto;
    width: 100px;
    height: 100px;
    border: 5px white solid;
    border-left-color: #ff5500;
    border-right-color:#0c80fe;
    border-radius: 100%;
    animation: loading1 1s infinite linear;
}
@keyframes loading1{
    from{transform: rotate(0deg)}to{transform: rotate(360deg)}
}

loading3：

1、HTML：

<div id="loader3">
    <div id="loader3-inner"></div>
</div>

2、CSS：

#loader3{
    box-sizing: border-box;
    position: relative;
    margin-left: 48%;
    transform: rotate(180deg);
    width: 50px;
    height: 50px;
    border: 10px groove rgb(170, 18, 201);
    border-radius: 50%;
    animation: loader-3 1s ease-out alternate infinite;/* alternate表示则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）反向播放 */
}
#loader3-inner{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 0 inset rgb(170, 18, 201);
    border-radius: 50%;
    animation: border-zoom 1s ease-out alternate infinite;
}
@keyframes loader-3 {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(-360deg);
    }
}
@keyframes border-zoom {
    0%{
        border-width: 0px;
    }
    100%{
        border-width: 10px;
    }
}

loading4：

1、HTML：

<div id="loading4">
     <div id="loader4" class="heart"></div>
</div>

2、CSS：

#loading4{
    width: 100%;
    height: 100px;
}
#loader4{
    position: relative;
    margin-left: calc(50% - 25px);
    width: 50px;
    height: 50px;
    animation: loader-4 1s ease-in-out alternate infinite;
}
.heart:before{
    position: absolute;
    left: 11px;
    content: "";
    width: 50px;
    height: 80px;
    transform: rotate(45deg);
    background-color: rgb(230, 6, 6);
    border-radius: 50px 50px 0 0;
}
.heart:after{
    position: absolute;
    right: 11px;
    content: "";
    width: 50px;
    height: 80px;
    background-color: rgb(230, 6, 6);
    transform: rotate(-45deg);
    border-radius: 50px 50px 0 0;
}
@keyframes loader-4 {
    0%{
        transform: scale(0.2);
        opacity: 0.5;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}

逢年过节，百度或者谷歌都会在首页播放一段动画，比如元宵节：

这个动画不是gif图，而是一张长长的包含所有帧的图片，仿照animation一帧一桢的思路，可以将这张图片做成动画：

#picHolder{
/* 图片样式 */
    position: absolute;
    top: 17%;
    left: 50%;
    width: 270px;
    height: 129px;
    margin-left:-135px;
    background-image: url("../../../Library_image/tangyuan.png");
    background-repeat: no-repeat;
    background-position-x: 0;
    cursor: pointer; 
}

不过有时候他们又会放上一张gif图，不懂他们的套路.原文来自：http://www.cnblogs.com/wz71014q/p/8862127.html

链接: https://www.fly63.com/article/detial/703

css制作简单loading动画效果【css3 loading加载动画】

loading1：

loading2：

loading3：

loading4：

如何写出高性能的CSS3动画

css3动画讲解，关于css3的@keyframes和animation

css3动画transition的使用和介绍

CSS3动画相比JS Animation 哪个更快?

不定高度的元素实现transition动画_如何为height:auto的div添加css3过渡动画

css3动画的性能优化_针对移动端卡顿问题

CSS3动画transform、transition和animation的区别

css3动画，监控动画执行完毕

值得你收藏的10个CSS3动画工具

CSS3动画总结

css制作简单loading动画效果【css3 loading加载动画】

loading1：

loading2：

loading3：

loading4：

如何写出高性能的CSS3动画

css3动画讲解，关于css3的@keyframes和animation

css3动画transition的使用和介绍

CSS3动画 相比JS Animation 哪个更快?

不定高度的元素实现transition动画_如何为height:auto的div添加css3过渡动画

css3动画的性能优化_针对移动端卡顿问题

CSS3动画transform、transition和animation的区别

css3动画，监控动画执行完毕

值得你收藏的10个CSS3动画工具

CSS3动画总结

CSS3动画相比JS Animation 哪个更快?