网页开发5

最新推荐文章于 2024-10-02 15:35:50 发布

无脑全款买IQ

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量86

点赞数

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

版权

html css js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/抗疫5.css"/>
	</head>
	<body>
		<div class="zi"><img src="img/向可爱的人学习%20加油助威.png" ></div>
		<div class="shou"><img src="img/点赞大拇指真棒加油.png" ></div>
		<p contenteditable="true" style="outline: none; position: absolute; "  class="p1">万众一心，像坚固的城堡一样不可摧毁我们大家一起加油！</p>
		<a href="抗疫6.html"><div class="enniu"><img src="./img/3-按钮.png" ></div></a>
		<audio src="music/bgm.mp3" autoplay="autoplay"></audio>
	</body>
</html>

css5

body{
	background-image: url(../img/4bg.png);
	background-attachment: fixed;
	background-repeat:no-repeat;
	background-size: 100%;
	position: relative;
}
.zi{
	margin-left: 600px;
	margin-top: 100px;
	animation: myfrist 1s infinite;
	animation-iteration-count:3;
	position: absolute;
}
.shou{
	margin-left: 390px;
	margin-top: 320px;
	animation: myfrist 1s infinite;
	animation-iteration-count:3;
	position: absolute;
}
@keyframes myfrist{
	0%{transform: scale(1);}
	50%{transform: scale(1.2);}
	100%{transform: scale(1);}
}
.p1{
	font-size: 35px;
	font-weight: 900;
	width: 400px;
	height: 500px;
	margin-left: 280px;
	margin-top: 625px;
	word-wrap: break-word;
	line-height: 2.5;
	position: absolute;
}
.enniu{
	margin-top: 1500px;
	margin-left: 260px;
	position: absolute;
}