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="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:;
}
}
环形进度条：
0、原理：
(1)、
如图，先画一个正方形，这个正方形就是环形loading的轨道（现在还不是），再将一个圆放在上面，充当遮蔽物。
(2)、
CSS3有个clip属性，可以裁剪图像，将上面的圆裁为一半，假如这个圆的右半部分一直看不见，旋转左边这个半圆，会出现怎样的效果呢？
(3)、
如图，就是这种效果，这时候再加一个遮罩，就形成了下面这种效果：
(4)、
再将最下面的正方形变成圆形（变成真正的轨道），旋转橙色部分的圆环，底部青色的就会露出来，就形成了进度条的效果
(5)、
这是左边的一半，将右边的一半补齐：
(6)、
中间白色部分是mask，加上相应的文字，调整颜色就ok啦！
(7)、
1、HTML:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="progress.css">
</head> <body>
<div class="circle">
<div class="preLeft">
<div class="left"></div>
</div>
<div class="preRight">
<div class="right"></div>
</div>
</div>
<div class="mask">
<span class="progress">0</span>%
</div>
<script src="progress.js"></script>
</body> </html>
2、CSS:
*{
margin:;
padding:;
}
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 0 7px 0px inset;
background:linear-gradient(#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
filter: blur(8px);
transform: scale(1.1);
-webkit-mask: radial-gradient(black 30px, #0000 90px);
}
.preLeft{
position: absolute;
top:;
left:;
width: 200px;
height: 200px;
clip: rect(0, 100px, auto, 0);
}
.left{
position: absolute;
top:;
left:;
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 0 3px 0px inset;
background: #fff;
transform: rotate(0deg);
clip: rect(0, 100px, auto, 0);
}
.preRight{
position: absolute;
top:;
left:;
width: 200px;
height: 200px;
clip: rect(0, auto, auto, 100px);
}
.right {
position: absolute;
top:;
left:;
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 0 3px 0px inset;
background:#fff;
transform: rotate(0deg);
clip: rect(0, auto, auto, 100px);
}
.mask {
width: 150px;
height: 150px;
position: absolute;
left: 25px;
top: 25px;
border-radius: 50%;
/* box-shadow: 0 0 5px 0px; */
background: #FFF;
text-align: center;
line-height: 150px;
}
3、JS:
function init() {
let left = document.getElementsByClassName('left')[0];
let right = document.getElementsByClassName('right')[0];
let progress = document.getElementsByClassName('progress')[0];
let value = 0;
let timer = setInterval(() => {
if (progress.innerHTML < 100) {
progress.innerHTML = value++;
if (value <= 50) {
right.style.transform = 'rotate(' + (value * 3.6) + 'deg)';
} else if (value <= 100) {
left.style.transform = 'rotate(' + ((value - 50) * 3.6) + 'deg)';
}
} else {
clearInterval(timer);
}
}, 100);
}
window.onload = function () {
init();
};
-
逢年过节，百度或者谷歌都会在首页播放一段动画，比如元宵节：
这个动画不仅仅是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:;
cursor: pointer;
}
function animation () {
/* 定时移动图片，使观众看到不同的帧 */
var po = 0
var i = 0
var holder = document.getElementById('picHolder')
setInterval(function () {
po += -270
i++
holder.style.backgroundPositionX = po + 'px'
if (i >= 31) {
i = 0
po = 270
}
}, 100)
}
window.onload = function () {
animation()
}
不过有时候他们又会放上一张gif图，不懂他们的套路
CSS制作简单loading动画的更多相关文章
- css制作简单loading动画效果【css3 loading加载动画】
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...
- 纯css去实现loading动画效果图
当项目中加载内容慢的的时候,需要显示一个loading动画效果图 之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...
- CSS制作简单图标
CSS制作图标包括知识点如border-width.border-style.border-color.border-radius.对元素的定位拼接.旋转等结合起来. 图标效果如下(拖动滑块可缩放图标 ...
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
- 用CATransform3D实现3D效果和制作简单3D动画
我们先来看下CATransform3D的头文件 struct CATransform3D { CGFloat m11, m12, m13, m14; CGFloat m21, m22, m23, m2 ...
- 用Laya制作简单的动画
(function () { var layaGameInit = window.layaGameInit || {}; var WebGL = Laya.WebGL; var Browser = L ...
- js+css制作简单的轮播图带有定时功能
用纯css和JavaScript代码制作带有定时轮播功能的轮播图 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- css制作简单的导航栏
//css代码 #menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: ...
- 使用div+css制作简单导航 以及要注意问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- pandas格式化str为时间,pandas将int转化为str
code_300['HISTORY_DATE'] = code_300['HISTORY_DATE'].map(str)code_300['HISTORY_DATE'] = pd.to_datetim ...
- Linux下的find命令
Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.即使系统中含有网络文件系统,find命令在该文件系统中同样有效.在运行一个非 ...
- 瑞芯微ROCK960 RK3399固件烧录总结
1 下载固件 进入瑞芯微ROCK960下载主页 https://www.96boards.org/documentation/consumer/rock/downloads/ 选择os固件, Debi ...
- BZOJ 1617 Usaco 2008 Mar. River Crossing渡河问题
[题解] 显然是个DP题. 设$f[i]$表示送$i$头牛过河所需的最短时间,预处理出$t[i]$表示一次性送i头牛过河所需时间,那么我们可以得到转移方程:$f[i]=min(f[i],f[i-j]+ ...
- flask_model防止循环引用
1 首先介绍app-model的循环引用 https://www.cnblogs.com/fuzzier/p/7920645.html 2 解决方式 https://www.cnblogs.com/f ...
- SSL常用专业缩略语汇总
JKS - Java KeyStore JAVA密钥库 OCSP - Online Certificate Status Protocol证书在线状态协议. SAN - Subject Alterna ...
- 【Codeforces 126B】Password
[链接] 我是链接,点我呀:) [题意] 给你一个字符串s 让你从中选出来一个字符串t 这个字符串t是s的前缀和后缀 且在除了前缀和后缀之外的中间部位出现过. 且要求t的长度最长. 让你输出这个字符串 ...
- 解决maven打包编译出现File encoding has not been set问题
maven打包编译时后台一直输出警告信息 [WARNING] File encoding has not been set, using platform encoding GBK, i.e. bui ...
- nyoj_283_对称排序_201312051155
对称排序 时间限制:1000 ms | 内存限制:65535 KB 难度:1 描述 In your job at Albatross Circus Management (y ...
- Codeforces Round #305 (Div. 2) E题（数论+容斥原理）
E. Mike and Foam time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...