添加HTML模板文件
This commit is contained in:
焦帅浩
puke
341
templates/1080x1920/minimal_1080x1920.html
Normal file
341
templates/1080x1920/minimal_1080x1920.html
Normal file
@@ -0,0 +1,341 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080, height=1920">
|
||||
<title>视频模板 - 极简现代风格</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #ffffff;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
|
||||
display: flex;
|
||||
position: relative;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* 背景装饰 */
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 极简线条 */
|
||||
.minimal-line {
|
||||
position: absolute;
|
||||
background: linear-gradient(90deg, transparent, #000000, transparent);
|
||||
opacity: 0.03;
|
||||
}
|
||||
|
||||
.line-1 {
|
||||
width: 600px;
|
||||
height: 1px;
|
||||
top: 20%;
|
||||
right: 50px;
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
.line-2 {
|
||||
width: 500px;
|
||||
height: 1px;
|
||||
top: 60%;
|
||||
left: 80px;
|
||||
transform: rotate(8deg);
|
||||
}
|
||||
|
||||
.line-3 {
|
||||
width: 400px;
|
||||
height: 1px;
|
||||
bottom: 20%;
|
||||
right: 100px;
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
/* 极简圆形 */
|
||||
.circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000000;
|
||||
opacity: 0.04;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
top: -150px;
|
||||
right: -100px;
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
bottom: 150px;
|
||||
left: -80px;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: 50%;
|
||||
left: 150px;
|
||||
}
|
||||
|
||||
/* 装饰点 */
|
||||
.dot {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: #000000;
|
||||
opacity: 0.06;
|
||||
}
|
||||
|
||||
.dot-1 {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
top: 15%;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.dot-2 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
bottom: 25%;
|
||||
right: 120px;
|
||||
}
|
||||
|
||||
/* 主容器 */
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 100px 80px 90px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 标题区域 */
|
||||
.header {
|
||||
margin-bottom: 100px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title-accent {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
letter-spacing: 8px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 300;
|
||||
opacity: 0.4;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 86px;
|
||||
font-weight: 300;
|
||||
line-height: 1.1;
|
||||
color: #000000;
|
||||
letter-spacing: -3px;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.title-underline {
|
||||
margin-top: 30px;
|
||||
height: 2px;
|
||||
width: 100px;
|
||||
background: #000000;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* 图片区域 */
|
||||
.image-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 900px;
|
||||
height: 900px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 极简装饰点 */
|
||||
.minimal-dot {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #000000;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.minimal-dot.top-left {
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.minimal-dot.top-right {
|
||||
top: 40px;
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.minimal-dot.bottom-left {
|
||||
bottom: 40px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.minimal-dot.bottom-right {
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.content-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 40px;
|
||||
font-weight: 300;
|
||||
line-height: 1.9;
|
||||
color: #000000;
|
||||
max-width: 90%;
|
||||
position: relative;
|
||||
padding: 60px 80px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-radius: 4px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* 底部装饰 */
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 30px 0 0;
|
||||
margin-top: auto;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.accent-line {
|
||||
height: 2px;
|
||||
background: #000000;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.accent-line:nth-child(1) { width: 80px; }
|
||||
.accent-line:nth-child(2) { width: 40px; }
|
||||
.accent-line:nth-child(3) { width: 60px; }
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 1080px) {
|
||||
.container {
|
||||
padding: 80px 60px 70px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 34px;
|
||||
padding: 50px 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 背景装饰 -->
|
||||
<div class="bg-decoration">
|
||||
<div class="minimal-line line-1"></div>
|
||||
<div class="minimal-line line-2"></div>
|
||||
<div class="minimal-line line-3"></div>
|
||||
|
||||
<div class="circle circle-1"></div>
|
||||
<div class="circle circle-2"></div>
|
||||
<div class="circle circle-3"></div>
|
||||
|
||||
<div class="dot dot-1"></div>
|
||||
<div class="dot dot-2"></div>
|
||||
</div>
|
||||
|
||||
<!-- 主要内容容器 -->
|
||||
<div class="container">
|
||||
<!-- 标题区域 -->
|
||||
<div class="header">
|
||||
<div class="title-accent">SIMPLE</div>
|
||||
<div class="title">{{title}}</div>
|
||||
<div class="title-underline"></div>
|
||||
</div>
|
||||
|
||||
<!-- 图片区域 -->
|
||||
<div class="image-section">
|
||||
<div class="image-container">
|
||||
<img src="{{image}}" alt="内容图片">
|
||||
<div class="minimal-dot top-left"></div>
|
||||
<div class="minimal-dot top-right"></div>
|
||||
<div class="minimal-dot bottom-left"></div>
|
||||
<div class="minimal-dot bottom-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="content-section">
|
||||
<div class="content-text">{{text}}</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部装饰条 -->
|
||||
<div class="footer">
|
||||
<div class="accent-line"></div>
|
||||
<div class="accent-line"></div>
|
||||
<div class="accent-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user