HTML网页设计,视频动画背景

最新推荐文章于 2024-06-20 23:28:37 发布

四十四次日落.770

最新推荐文章于 2024-06-20 23:28:37 发布

阅读量710

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_62989001/article/details/121685016

版权

本文介绍了一篇结合宫崎骏风格的网页设计，以视频背景和可点击的导航元素为核心，探讨了如何运用HTML、CSS和JavaScript创建沉浸式用户体验。背景视频和Logo设计展示了独特的艺术风格，同时提供了宫崎骏作品和相关动画的选择功能。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="style.css"> 
	</head>
	<body>
		<section class="header">
			<video autoplay loop class="video-background" plays-inine>
				<source src="file:///H:/汇报/视频/宫崎骏.mp4" type="video/mp4"></source>
			</video>
			<!-- 背景视频 -->
			
			<img src="file:///H:/汇报/图片/赵.png" class="logo">
			<!-- logo图片 -->
			<div class="welcome-msg">
				<h1></h1>
				<a href="file:///H:/汇报/文件/宫崎骏.html" class="btn btn-subscribe">宫崎骏</a>
				<a href="file:///H:/汇报/文件/视频动画2.html" class="btn btn-comment">刺客五六七</a>
				<!-- 选择按钮 -->
			</div>
		</section>
	</body>
</html>

*
{
	margin:0;
	padding:0;
}
.header
{
	height: 100vh;
}
.video-background
{
	position:absolute;
	right:0;
	bottom:0;
	min-width:100%;
	min-height:100%;
	width:auto;
	height:atuo;
	z-index:-1;
}
@media (min-aspect-ratio:16/9) 
{
	.video-background
	{
		width:100%;
		height:auto;
	}
}
@media (max-aspect-ratio:16/9) 
{
	.video-background
	{
		width:auto;
		height:100%;
	}
}
.logo
{
	margin:20px;
	height:80px;
	
}
.welcome-msg
{
	position:relative;
	text-align:center;
	font-family: ;
	color: ;
	top:150px;
}
.welcome-msg h1
{
	font-size:80px;
	font-weight:100;
	letter-spacing:5px;
	margin-bottom:30px;
}
.btn
{
	font-size:18px;
	color:#fff;
	margin:5px;
	padding:7px 22px;
	text-decoration:none;
	border:1px solid coral;
	border-radius:25px;
}
.btn-subscribe
{
	background: coral;
}
.btn-comment:hover
{
	background:coral;
	transition: .5s;
}