该文本是一个HTML文档，展示了一个名为“程序员茄子”的专业网站开发页面。页面包含一个全屏背景视频和中心内容，内容包括标题和描述，旨在吸引用户并提供联系链接。使用了CSS样式来设置布局、字体、动画效果和按钮样式，整体设计现代且具有视觉吸引力。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>程序员茄子 - 专业网站开发</title>
<style>
/* 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: "Microsoft YaHei", sans-serif;
overflow: hidden;
}
/* 背景视频样式 */
.video-bg {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
transform: translate(-50%, -50%);
background-size: cover;
}
/* 内容样式 */
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
animation: fadeIn 2s ease-in-out;
}
.content h1 {
font-size: 80px;
margin-bottom: 20px;
letter-spacing: 5px;
text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
}
.content p {
font-size: 24px;
margin-bottom: 40px;
text-shadow: 1px 1px 5px rgba(0,0,0,0.7);
}
/* 按钮样式 */
.content a {
display: inline-block;
padding: 15px 30px;
font-size: 18px;
color: #fff;
text-decoration: none;
border: 2px solid #fff;
border-radius: 30px;
transition: background 0.5s, color 0.5s;
}
.content a:hover {
background: #fff;
color: #000;
}
/* 进入动画 */
@keyframes fadeIn {
from { opacity: 0; transform: translate(-50%, -60%); }
to { opacity: 1; transform: translate(-50%, -50%); }
}
</style>
</head>
<body>
<!-- 背景视频 -->
<video class="video-bg" autoplay muted loop>
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
您的浏览器不支持视频背景。
</video>
<!-- 内容部分 -->
<div class="content">
<h1>程序员茄子</h1>
<p>专业网站开发，助您实现互联网梦想</p>
<a href="#contact">联系我</a>
</div>
</body>
</html>
