网页开发抗疫

最新推荐文章于 2022-12-07 10:33:23 发布

无脑全款买IQ

最新推荐文章于 2022-12-07 10:33:23 发布

阅读量348

点赞数 1

本文链接：https://blog.csdn.net/m0_53723953/article/details/120947411

版权

html css js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这是一个关于HTML、CSS和JavaScript实现的加载页面动画和交互的示例。页面背景使用图片，通过CSS设置元素布局、动画效果，并利用JavaScript控制页面元素动态变化，如进度条加载、按钮点击跳转等。此外，还涉及音乐播放控制功能。

摘要由CSDN通过智能技术生成

HTML部分加载页众志成城

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="./css/01.css"/>
		<script src="./js/01.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="main">
			<div class="zhe"></div>
			<div style="width: 80vw;height: 2vh; position: absolute; background-color: red;left: 10vw;border-radius: 20px; margin-top: 45vh;">
				<div class="back">
					
				</div>
				
			</div>
			<div style="width: 80vw;height: 2vh; position: absolute; left: 10vw;border-radius: 20px; margin-top: 45vh; text-align: center;display: flex;justify-content: center;align-items: center;
			color: #FFFFFF;font-size: 1vw;
			" class="font">
				
			</div>
		</div>
	</body>
</html>

css部分

*{
	margin: 0;
	padding: 0;
}
.main{
	width: 100vw;
	height: 100vh;
	position: relative;
	background-image: url(../img/1.png); 
	background-size: 100% 100%;
}
.zhe{
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-color: black;
	opacity: 0.6;
	display: flex;justify-content: center;align-items:center;
}
.back{
	background-color: yellow;
	height: 2vh; position: absolute;
	border-radius: 20px;
}
.main02{
	width: 100vw;
	height: 100vh;
	position: relative;
	background-image: url(../img/02bg.png); 
	background-size: 100% 100%;
}
.zhongzhi img{
	width:80vw;
	position: absolute;
	margin-top: 30vh;
	margin-left: 10vw;
	animation: xuanzhuan 3s forwards linear;
}
.music{
	position: absolute;
	top: 2vh;
	right: 5vw;
	width: 10vw;
	/* animation: xuanzhuan 5s infinite linear; */
}
.music2{
	position: absolute;
	top: 2vh;
	right: 5vw;
	width: 10vw;
	/* animation: xuanzhuan 5s infinite linear; */
}
.anniu{
	position: absolute;
	left: 20vw;
	bottom: 3vh;
}
.anniu img{
	width: 60vw;
}
.main03{
	width: 100vw;
	height: 100vh;
	position: relative;
	background-image: url(../img/2-bg.png); 
	background-size: 100% 100%;
}
.fonts{
	position: absolute;
	font-weight: bold;
	top: 20vh;
	font-size: 1vw;
	width: 100vw;
	overflow: hidden;
	
	
}

.item{
	margin: 0 auto;
	overflow: hidden;
	opacity: 0;
	
}
.item:nth-child(1){
	height: 2.5vh;
	/* background-color: #FFFF00; */
	animation: auto 2s steps(18) forwards;
	width: 56vw;
	overflow: hidden;
}
.item:nth-child(2){
	height: 2.5vh;
	/* background-color: #FFFF00; */
	animation: auto1 3s steps(21) 2s forwards;
	width: 65vw;
	overflow: hidden;
}
.item:nth-child(3){
	height: 2.5vh;
	/* background-color: #FFFF00; */
	animation: auto2 2s steps(15) 5s forwards;
	width: 48vw;
	overflow: hidden;
}
.item:nth-child(4){
	height: 2.5vh;
	/* background-color: #FFFF00; */
	animation: auto2 2s steps(15) 7s forwards;
	width: 48vw;
	overflow: hidden;
}
.item:nth-child(5){
	height: 2.5vh;
	/* background-color: #FFFF00; */
	animation: auto2 2s steps(15) 9s forwards;
	width: 48vw;
	overflow: hidden;
}
.item:nth-child(6){
	height: 2.5vh;
	/* background-color: #FFFF00; */
	animation: auto3 2s steps(15) 11s forwards;
	width: 20vw;
	overflow: hidden;
}

.img1{
	position: absolute;
	width: 60vw;
	top: 50vh;
	left: 20vw;
	animation: suofang 1s infinite;
	animation-iteration-count: 2;
}
.img2{
	position: absolute;
	width: 60vw;
	top: 70vh;
	left: 20vw;
	animation: suofang 1s infinite;
	animation-iteration-count: 2;
}
.anniu03-bo{
	position: absolute;
	width: 60vw;
	left: 20vw;
	bottom: 2vh;
}


@keyframes auto{
	from{
	width: 0;
	opacity: 1;
	}
	to{
	width:56vw;	
	opacity: 1;
	}
}

@keyframes auto1{
	from{
	width: 0;
	opacity: 1;
	}
	to{
	width:65vw;
	opacity: 1;
	}
}
@keyframes auto2{
	from{
	width: 0;
	opacity: 1;	
	}
	to{
	width:48vw;
	opacity: 1;	
	}
}
@keyframes auto3{
	from{
	width: 0;
	opacity: 1;
	}
	to{
	width:20vw;
	opacity: 1;	
	}
}

@keyframes suofang{
	0%,100%{
	transform: scale(1);	
	}
	50%{
	transform: scale(0.9);	
	}
}

js部分

window.onload = function(){
	var back = document.querySelector('.back')
	var font = document.querySelector('.font')
	var i = 0
	var timer = setInterval(function(){
		if(i === 100) {
			i=100
			location.href = '02.html'
		}else{
			back.style.width = i + '%'
			i++
		}
		
		font.innerHTML = i + '%'
	},10)
	
	var anniu = document.querySelector('.anniu')
	anniu.addEventListener('click',function(){
		location.href = '03.html'
		
	})
	
	var annou03bo = document.querySelector('.anniu03-bo')
	annou03bo.addEventListener('click',function(){
		location.href = '抗疫4.html'
		console.log('111')
	})
	var music = document.querySelector('.music')
	var music1 = document.querySelector('.music1')
	var music2 = document.querySelector('.music2')
	var i = 1 
	music.addEventListener('click',function(){
		if(music1.paused){
			music1.play()
			
		}else{
			music1.pause()
			
		}
		
		
	})
	music2.addEventListener('click',function(){
		if(music1.paused){
			music1.play()
			
		}else{
			music1.pause()
			
		}
		
		
	})
	music.addEventListener('click',function(){
		music.style.opacity = 0
		music2.style.display = 'block'
	})
	music2.addEventListener('click',function(){
		music.style.opacity = 1
		music2.style.display = 'none'
	})

}