网页开发6-CSDN博客

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

html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <link rel="stylesheet" type="text/css" href="css/抗疫6.css"/>
   </head>
   <body>
       <div class="liu1"><img src="img/6-1.png" ></div>
       <div class="liu2"><img src="./img/6-2.png" ></div>
       <div class="liu3"><img src="img/6-3.png" ></div>
       <div class="liu4"><img src="./img/6-4.png" ></div>
       <a href="02.html"><div class="liu5"><img src="img/6返回首页.png" ></div></a>
       <audio src="music/bgm.mp3" autoplay="autoplay"></audio>
   </body>
</html>

css6

body{
	background-image: url(../img/6bg.png);
	background-attachment: fixed;
	background-repeat:no-repeat;
	background-size: 100%;
}
.liu1{
	margin-top: 320px;
	opacity: 0;
	margin-left: 120px;
	animation: myliu 1s infinite forwards;
	animation-iteration-count: 1;
}
.liu2{
	margin-top: 60px;
	opacity: 0;
	margin-left: 120px;
	animation: myliu 1s infinite 1s forwards;
	animation-iteration-count: 1;
}
.liu3{
	margin-top: 60px;
	opacity: 0;
	margin-left: 120px;
	animation: myliu 1s infinite 2s forwards;
	animation-iteration-count: 1;
}
.liu4{
	margin-top: 60px;
	opacity: 0;
	margin-left: 120px;
	animation: myliu 1s infinite 3s forwards;
	animation-iteration-count: 1;
}
.liu5{
	margin-top: 240px;
	margin-left: 200px;
	opacity: 0;
	animation: myliu 1s infinite 4s forwards;
	animation-iteration-count: 1;
}

	@keyframes myliu{
	from{opacity: 0%;opacity: 0;}
	to{opacity: 100%;opacity: 100;}
	}