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

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

原创最新推荐文章于 2022-09-04 14:57:10 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #javascript

前端案例专栏收录该内容

5 篇文章

订阅专栏

这篇博客展示了如何利用HTML和CSS创建一个加载动画。通过设置不同的动画延迟，使得多个元素依次进入视图，形成平滑的加载效果。HTML结构包含多个span元素，CSS通过关键帧动画`@keyframes`定义了元素的透明度和位置变化，从而创造出视觉上的动态感。

代码如下：

<!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);
	}

}