CSS3 动画实现几个常见的loading效果

其他 2019-02-21 21:00:56 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_31490071/article/details/85102891

最近在学习使用CSS动画，看着一些已经实现的loading，自己动手写了一下，在这里做个记录，方便以后在项目中应用，感兴趣的小伙伴也可以拿去用，由于我的电脑无法录制gif，所以暂时先用图片代替效果吧，以后搞好了再更新。

1.图片效果

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0,width=device-width"/>
		<title>实现自定义loading效果</title>
	    <link rel="stylesheet" href="../css/loadingstyle.css" />
	</head>
	<body>
		<div class="spinner">
	        <div class="rect1"></div>
			<div class="rect2"></div>
			<div class="rect3"></div>
			<div class="rect4"></div>
			<div class="rect5"></div>
		</div>
	</body>
</html>

css代码：

*{
	padding:0;
	margin:0;
	
}
html,body{
    height:100%;
}
.spinner{
	position:absolute;
	width:60px;
	height:50px;
	text-align: center;
	top:50%;
	left:50%;
	font-size:12pt;
	transform: translate(-50%,-50%);   /*使用这句用于元素的居中显示*/
}
.spinner > div {
	height:100%;
	width:6px;
	background: #67CF22;
	float: left;
	margin-left: 4px;
	animation: strechedelay 2s infinite ease-in;
	-webkit-animation: strechedelay 2s infinite ease-in;
	-moz-animation: strechedelay 2s infinite ease-in;
}

@keyframes strechedelay{
	0%,40%,100%{
	   transform:scaleY(0.4)	
	}
	20%{
		transform:scaleY(1.0)
	}
}

@-webkit-keyframes strechedelay{
	0%,40%,100%{
	   transform:scaleY(0.4)	
	}
	20%{
		transform:scaleY(1.0)
	}
}

@-moz-keyframes strechedelay{
	0%,40%,100%{
	   transform:scaleY(0.4)	
	}
	20%{
		transform:scaleY(1.0)
	}
}

.spinner .rect1{
	animation-delay: 0.8s;
	-webkit-animation-delay: 0.8s;
	
}

.spinner .rect2{
	animation-delay: 0.9s;
	-webkit-animation-delay: 0.9s;
	
}
.spinner .rect3{
	animation-delay: 1.0s;
	-webkit-animation-delay: 1.0s;
	
}

.spinner .rect4{
	animation-delay: 1.1s;
	-webkit-animation-delay: 1.1s;
	
}

.spinner .rect5{
	animation-delay: 1.2s;
	-webkit-animation-delay: 1.2s;
	
}

2.图片效果

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0,width=device-width" />
		<title>loading效果2</title>
		<link rel="stylesheet" href="../css/loadingstyle2.css" />
	</head>
	<body>
		<div class="spinner">
			
		</div>
	</body>
</html>

css代码：

*{
	padding: 0;
	margin:0;
}
html,body{height:100%;}
.spinner{
	width:50px;
	height:50px;
	background: #67CF22;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	-webkit-animation: rotateplane 1.2s infinite ease-in-out;
	animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane{
	0%{-webkit-transform: rotateX(0deg) rotateY(0) ;}
	50%{-webkit-transform: rotateY(180deg) ;}
	100%{-webkit-transform:rotateX(180deg) rotateY(180deg)}
}

@keyframes rotateplane{
	0%{transform: rotateX(0deg) rotateY(0) ;}
	50%{transform: rotateY(180deg) ;}
	100%{transform:rotateX(180deg) rotateY(180deg) }
}

3.图片效果

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0,width = device-width"  />
		<title>Loading圆形效果</title>
		<link rel="stylesheet" href="../css/loadingstyle3.css" />
	</head>
	<body>
		<div class="spinner">
 			<div class="double-bounce1"></div>
  			<div class="double-bounce2"></div>
</div>
	</body>
</html>

css代码

*{
	padding:0;
	margin:0;
}

html,body{
	height:100%;
}

.spinner{
	width:60px;
	height:60px;
	text-align: center;
	align-content: center;
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
}

.spinner .double-bounce1,.spinner .double-bounce2{
	width:100%;
	height:100%;
	background: #67CF22;
	border-radius: 50% 50%;
	opacity: 0.5;
	position:absolute;
}

.double-bounce1{
	-webkit-animation: scalecircle 1.2s infinite ease-in-out;
	animation: scalecircle 1.2s infinite ease-in-out;
}

.double-bounce2{
	-webkit-animation: scalecircle2 1.2s infinite ease-in-out;
	animation: scalecircle2 1.2s infinite ease-in-out;
}

@keyframes scalecircle{
	0%{transform: scale(1.0);}
	100%{transform: scale(0.0);}
}

@-webkit-keyframes scalecircle{
	0%{-webkit-transform: scale(1.0);}
	100%{-webkit-transform: scale(0.0);}
}


@keyframes scalecircle2{
	0%{transform: scale(0.0);}
	100%{transform: scale(1.0);}
}

@-webkit-keyframes scalecircle2{
	0%{-webkit-transform: scale(0.0);}
	100%{-webkit-transform: scale(1.0);}
}

4.图片效果

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0,width=device-width" />
		<title>自定义loading小方块变化效果</title>
		<link rel="stylesheet" href="../css/loadingstyle4.css" />
	</head>
	<body>
		<div class="spinner">
			<div class="squear1"></div>
			<div class="squear2"></div>
		</div>
	</body>
</html>

css代码

*{margin:0;padding:0}
html,body{height:100%;}
.spinner{
	width:32px;
	height:32px;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

.squear1,.squear2{
	width:30px;
	height:30px;
	top:0;
	left:0;
	background: #67CF22;
	position:absolute;
}

.squear1{
	-webkit-animation: cubechange 2s infinite ease-in-out;
	animation: cubechange 2s infinite ease-in-out;
}

.squear2{
	-webkit-animation: cubechange 2s infinite ease-in-out 1s;
	animation: cubechange 2s infinite ease-in-out 1s;
}

@-webkit-keyframes cubechange{
	25%{
		transform: scale(0.5) rotate(90deg) translateX(40px);
	}
	50%{
		transform: rotate(179deg) translateX(40px) translateY(40px);
	}
	50.1%{
		transform: rotate(180deg) translateX(40px) translateY(40px);
	}
	75%{
		transform: scale(0.5) rotate(270deg) translateY(40px) translateX(0px);
	}
	100%{
		transform: rotate(360deg);
	}
}

@keyframes cubechange{
	25%{
		transform: scale(0.5) rotate(90deg) translateX(40px);
	}
	50%{
		transform: rotate(179deg) translateX(40px) translateY(40px);
	}
	50.1%{
		transform: rotate(180deg) translateX(40px) translateY(40px);
	}
	75%{
		transform: scale(0.5) rotate(270deg) translateY(40px) translateX(0px);
	}
	100%{
		transform: rotate(360deg) ;
	}
}

5.图片效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>loading效果圆圈</title>
		<meta name="viewport" content="initial-scale=1.0,width=device-width" />
	    <link rel="stylesheet" href="../css/loadingstyle5.css" />
	</head>
	<body>
		<div class="spinner">
			<div class="smallcircle1"></div>
			<div class="smallcircle2"></div>
			<div class="smallcircle3"></div>
		</div>
	</body>
</html>

css代码：

*{margin:0;padding:0;}
html,body{height:100%;}
.spinner{
	width:auto;
	height:30px;
	position:absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%) ;
}

.smallcircle1,.smallcircle2,.smallcircle3{
	width:30px;
	height:30px;
	background: #007AFF;
	border-radius: 50% 50%;
	float:left;
	margin-left: 5px;
	-webkit-animation: bouncechange 1.2s infinite ease-in-out;
	animation: bouncechange 1.2s infinite ease-in-out;
}

.smallcircle2{
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.smallcircle3{
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}


@-webkit-keyframes bouncechange{
	0%{
		transform: scale(0);
	}
	50%{
		transform: scale(1.0);
	}
	100%{
		transform: scale(0);
	}
	
}

@keyframes bouncechange{
	0%{
		transform: scale(0);
	}
	50%{
		transform: scale(1.0);
	}
	100%{
		transform: scale(0);
	}
	
}

6.图片效果

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>loading效果圆圈</title>
		<meta name="viewport" content="initial-scale=1.0,width=device-width" />
	    <link rel="stylesheet" href="../css/loadingstyle6.css" />
	</head>
	<body>
		<div class="spinner1">
			<div class="cube cube1"></div>
			<div class="cube cube2"></div>
			<div class="cube cube3"></div>
			<div class="cube cube4"></div>
		</div>
		<div class="spinner2">
			<div class="cube cube5"></div>
			<div class="cube cube6"></div>
			<div class="cube cube7"></div>
			<div class="cube cube8"></div>
		</div>
	</body>
</html>

css代码

*{
	margin:0;
	padding:0;
}
html,body{height:100%;}

.spinner1,.spinner2{
	width:100px;
	height:100px;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

.spinner1{
	display: block;
}
.spinner2{
	display: block;
}

.cube{
	width:20px;
	height:20px;
	background: #67CF22;
	border-radius: 50% 50%;
	position:absolute;
	-webkit-animation: cubechange infinite 0.8s ease-in-out;
	animation: cubechange infinite 0.8s ease-in-out;
}

.cube1{
	top:12px;
	left:12px;
	-webkit-animation-delay: 0.7s;
	animation-delay: 0.7s;
}
.cube2{
	top:12px;
	left:68px;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}
.cube3{
	top:68px;
	left:12px;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
.cube4{
	top:68px;
	left:68px;
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.cube5{
	top:0px;
	left:40px;
}
.cube6{
	top:40px;
	left:0px;
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
.cube7{
	top:80px;
	left:40px;
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}
.cube8{
	top:40px;
	left:80px;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
	
}

@-webkit-keyframes cubechange{
	0%,100%{transform: scale(0.0);}
	25%,75%{transform: scale(0.5);}
	50%{transform: scale(1.0);}
}

@keyframes cubechange{
	0%,100%{transform: scale(0.0);}
	25%,75%{transform: scale(0.5);}
	50%{transform: scale(1.0);}
}

猜你喜欢

转载自blog.csdn.net/qq_31490071/article/details/85102891
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022