html+css+js实现页面加载动画

最新推荐文章于 2025-05-22 14:17:23 发布

月薪不过5000不改名

最新推荐文章于 2025-05-22 14:17:23 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

原文链接：https://www.bilibili.com/video/BV1Yr4y1P7hS?p=53&spm_id_from=333.1007.top_right_bar_window_history.content.click

本文展示了如何利用CSS3的动画属性和JavaScript定时器来制作三种不同的加载动画。通过更改HTML中链接的CSS文件，可以实现加载动画的切换。加载动画结束后，通过JS控制过渡到页面主要内容，实现了平滑的页面加载效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，介绍
使用css3的属性来制作动画特效（这里一共写了三个动画，可分别通过个更改style引入来实现不同同的加载动画），通过js定时器来控制动画加载时长，以及过渡到页面的过程。
2，效果图
动画1
demo1
动画2
demo2
动画3
demo3

3，html部分，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css_loaders</title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<!-- <link rel="stylesheet" type="text/css" href="css/loader1.css"/> -->
	<!-- <link rel="stylesheet" href="css/loader2.css"> -->
	<link rel="stylesheet" type="text/css" href="css/loader3.css"/>
	<body>
		<!-- loader1 第一个加载动画 -->
		<!-- <div class="loader">
			<div class="circle"></div>
			<div class="circle"></div>
		</div> -->
		
		
		<!-- loader2 第二个加载动画-->
		<!-- <div class="loader">
			loading
		</div>
		
		 -->
		<!-- loader3 第三个加载动画-->
		<div class="loader">
			<span></span>
			<span></span>
			<span></span>
		</div>
		
		<!-- 页面主页 -->
		<section class="main">
			<h1>欢迎来到 我的世界</h1>
			<p>
				welcomewelcomewelcomewelcomewel
				comewelcomewelcomewelcomew
				elcomewelcomewelcomewelcomewelcom
				ewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcome
			</p>
			<a href="#" class="btn">阅读更多</a>
		</section>
		<script src="js/main.js" type="text/javascript">
			
		</script>
	</body>
</html>

4，css部分
这里主要使用的css3中的动画属性，和flex布局。

style.css重置，以及整体样式

/* reset */
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body{
	font-family: 'Lato',sans-serif;
	font-size: 18px;
	line-height: 1.6;
	background-image: linear-gradient(125deg,#f5f7fa,#c3cfe2 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}
/* main */
.main{
	text-align: center;
	width: 90%;
	display: none;
	opacity:0;
	transition: opacity 1s ease-in;
}
.main h1{
	font-size: 50px;
	margin-bottom: 10px;
}
.main p{
	font-size: 25px;
	color: #333;
}
.btn{
	display: inline-block;
	background:purple;
	color: #FFFFFF;
	text-decoration: none;
	border: none;
	border-radius: 5px;
	padding: 10px 20px;
	margin-top: 15px;
}
.btn:hover{
	opacity: 0.9;
}

loader1.css

.loader{
	height: 50px;
	transform-origin: bottom center; 
	animation: rotate 3s linear infinite;
}
.circle{
	background-color: purple;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transform: scale(0);
	animation: grow 1.5s linear infinite;
	margin: -10px;
}
.circle:nth-child(2){
	background-color: palevioletred;
	animation-delay: 0.75s;
}

@keyframes rotate{
	to{
		transform: rotate(360deg);
	}
}
@keyframes grow{
	50%{
			transform: scale(1);
	}
}

loader2.css

.loader{
	font-family: 'ZCODL Kuaile',cursive;
	font-size: 40px;
	color: palevioletred;
}
.loader::after{
	content: "\2026";
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	animation: dots steps(4,end) 2s infinite;
	width: 0px;
}
@keyframes dots{
	to{
		width: 1.25em;
	}
}

loader3.css

.loader{
	display: flex;
	justify-content: center;
	align-items: center;
}
.loader>span{
	display: inline-block;
	background-color: purple;
	width: 0px;
	height: 0px;
	border-radius: 50%;
	margin: 0 8px;
	transform: translateY(0);
	animation: bounce 0.6s infinite alternate;
}
.loader>span:nth-child(2){
	background-color: palevioletred;
	animation-delay: 0.2s;
}
.loader>span:nth-child(3){
	background-color: palevioletred;
	animation-delay: 0.4s;
}
@keyframes bounce{
	to{
		width:16px;
		height: 16px;
		transform: translateY(-16px);
	}
}

5，js部分
main.js

var loader = document.querySelector('.loader');
var main = document.querySelector('.main');

function init(){
	setTimeout(function(){
		loader.style.opacity = 0;
		loader.style.display = 'none';
		
		main.style.display = 'block';
		setTimeout(function(){
			main.style.opacity = 1;
		},50) 
	},4000)
}

init();