html&css&js加载片段效果案例

最新推荐文章于 2022-09-04 14:57:10 发布

松老吴- 计算机程序员

最新推荐文章于 2022-09-04 14:57:10 发布

阅读量74

点赞数

分类专栏：前端案例文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_39804538/article/details/126366872

版权

前端案例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="loader">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>
</body>
</html>

CSS代码：

body
{
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #2196f3;
}
.loader
{
	position: relative;
	display: flex;
}
.loader span
{
	width: 50px;
	height: 300px;
	margin: 0 20px;
	background: #2196f3;
	animation: animate 1.4s linear infinite;
}
.loader span:nth-child(1)
{
 animation-delay: 0s;	
}
.loader span:nth-child(2)
{
 animation-delay: 0.2s;	
}
.loader span:nth-child(3)
{
 animation-delay: 0.4s;	
}
.loader span:nth-child(4)
{
 animation-delay: 0.6s;	
}
.loader span:nth-child(5)
{
 animation-delay: 0.8s;	
}
.loader span:nth-child(6)
{
 animation-delay: 1s;	
}
.loader span:nth-child(7)
{
 animation-delay: 1.2s;	
}
@keyframes animate
{
	0%
	{
		box-shadow: 0 0 0 rgba(0, 0, 0, .5);
		opacity: 0;
		transform: translateX(-50px) scale(1.0);
	}
	50%
	{
		box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
		opacity: 1;
		transform: translateX(0px) scale(1.2);
	}
	100%
	{
		box-shadow: 0 0 0 rgba(0, 0, 0, .5);
		opacity: 0;
		transform: translateX(50px) scale(1.0);
	}

}