网页开发四-CSDN博客

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

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,inital-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="./css/04.css"/>
	</head>
	<body>
		<div class="youshang"><img src="img/3-3.png" ></div>
		<div class="youzhong"><img src="img/3-2.png" ></div>
		<div class="zuoxia"><img src="img/3-4.png" ></div>
		<div class="zuoshang"><img src="img/3-1.png" ></div>
		<div class="youxia"><img src="img/3-5.png" ></div>
		<a href="抗疫5.html"><div class="enniu"><img src="./img/02-3anniu.png" ></div></a>
		<audio src="music/bgm.mp3" autoplay="autoplay"></audio>
	</body>
</html>

css 04

body{
	background-image: url(../img/3bg.png);
	width: 100vw;
	height: 100vh;
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: no-repeat;
    position: relative;
}
.youshang img{
	width: 35%;
	position: absolute;
	top: 680px;
	left: 220px;
	animation: myyoushang 1s infinite;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes myyoushang{
	from{top: 680px;left: 220px;}
	to{top: 300px;left: 235px;}
}
.youzhong img{
	width: 35%;
	position: absolute;
	top: -150px;
	left: 155px;
	animation: myyouzhong 2s infinite;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes myyouzhong{
	from{top: -150px;left: 155px;}
	to{top: 200px;left: 160px;}
}
.zuoxia img{
	width:35%;
	position: absolute;
	top:45rem ;
	left: 6rem;
	animation: myzuoxia 3s infinite;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes myzuoxia{
	from{	top:45rem ;left: 6rem;}
	to{	top:23rem ;left: 6rem;}
}
.zuoshang img{
	width: 35%;
	position: absolute;
	top: 13rem;
	left: -9rem;
	animation: myzuoshang 4s infinite;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes myzuoshang{
	from{top: 13rem;left: -9rem;}
	to{	top: 14.5rem;left: 1rem;}
}
.youxia img{
	width: 25%;
	position: absolute;
	top: 55rem;
	left:25rem ;
	animation: myyouxia 4.1s infinite;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes myyouxia{
	from{left: 20rem ;top:55rem;}
	to{top: 27.5rem;left:15.5rem ;;}
}
.enniu img{
	width: 50%;
	position: absolute;
	overflow: hidden;
	top: 40rem;
	left: 6rem;
}