CSS实现一个简单loading动画效果
发布时间：2018-04-17 16:24:07 作者：佚名 
我要评论
我要评论CSS的animation可以做出大多数的loading效果，今天脚本之家小编给大家带来了基于CSS实现一个简单loading动画效果，非常不错，需要的朋友参考下吧
曾经以为，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="loader">
<div id="loader-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="loading">
<div id="loader" 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: %;
left: %;
width: px;
height: px;
margin-left:-px;
background-image: url("../../../Library_image/tangyuan.png");
background-repeat: no-repeat;
background-position-x: ;
cursor: pointer;
}
function animation () {
/* 定时移动图片，使观众看到不同的帧 */
var po =
var i =
var holder = document.getElementById('picHolder')
setInterval(function () {
po += -
i++
holder.style.backgroundPositionX = po + 'px'
if (i >= ) {
i =
po =
}
}, )
}
window.onload = function () {
animation()
}
总结
以上所述是小编给大家介绍的CSS实现一个简单loading动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了CSS 实现各种 Loading 效果附带解析过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-19
这篇文章主要介绍了CSS loading效果之 吃豆人的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2019-09-09
这篇文章主要介绍了CSS3动画之DIY Loading动画的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-27- 这是一款基于css3齿轮loading动画特效，使用font-awesome字体图标的齿轮图标作为图案，通过CSS3 animation来制作三个齿轮的运动效果。感兴趣的朋友跟随小编一起看看吧2018-09-27
本篇文章主要介绍了一份纯CSS loading效果代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-16
这篇文章主要介绍了用纯CSS实现饼状Loading等待图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-23- 这篇文章主要介绍了使用CSS时间打点的Loading效果的教程,分别是基于box-shadow和基于border+background的两种实现方法,需要的朋友可以参考下2015-06-08
- 这篇文章主要为大家介绍了css实现叶子形状loading效果的方法,通过修改border-radius的参数实现的该效果,非常具有实用价值,需要的朋友可以参考下2015-01-30
现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一个有意思的动画效果，纯 css 实现 loading 加载中（多种展现形式），下面2023-02-08
最新评论