添加HTML模板文件
This commit is contained in:
焦帅浩
puke
128
templates/1080x1080/magazine_cover.html
Normal file
128
templates/1080x1080/magazine_cover.html
Normal file
@@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080, height=1080">
|
||||
<title>杂志封面风格 - 1080x1080</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body { width: 1080px; height: 1080px; overflow: hidden; }
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: #ffffff;
|
||||
color: #1a1a1a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 50px 50px 40px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* 顶部标题区 - 超大字号 */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 88px;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
color: #1a1a1a;
|
||||
letter-spacing: -1px;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* 装饰线条 */
|
||||
.header::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 5px;
|
||||
background: linear-gradient(90deg, transparent, #e63946, transparent);
|
||||
margin: 15px auto 0;
|
||||
}
|
||||
|
||||
/* 图片区域 - 占据大部分空间 */
|
||||
.image-section {
|
||||
flex: 1 1 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 10px 0;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
position: relative;
|
||||
border: 8px solid #000;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 底部文字区 - 小字号，杂志风格 */
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 5px;
|
||||
border-top: 3px solid #000;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
color: #2d3436;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.title { font-size: 78px; }
|
||||
.text { font-size: 28px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="title">{{title}}</div>
|
||||
</div>
|
||||
|
||||
<div class="image-section">
|
||||
<div class="image-container">
|
||||
<img src="{{image}}" alt="内容图片">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="text">{{text}}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
100
templates/1080x1080/minimal_framed_1080x1080.html
Normal file
100
templates/1080x1080/minimal_framed_1080x1080.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080, height=1080">
|
||||
<title>极简边框风格 - 1080x1080</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body { width: 1080px; height: 1080px; overflow: hidden; }
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: #fafafa;
|
||||
color: #1a1a1a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 100px 80px;
|
||||
}
|
||||
|
||||
/* 顶部标题 - 极简风格 */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 56px;
|
||||
font-weight: 300;
|
||||
line-height: 1.3;
|
||||
color: #2d3436;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
/* 图片区域 - 细边框，大留白 */
|
||||
.image-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 30px 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
border: 2px solid #2d3436;
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 底部文字 - 极简 */
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
line-height: 1.6;
|
||||
color: #636e72;
|
||||
letter-spacing: 1px;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.title { font-size: 50px; }
|
||||
.text { font-size: 26px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="title">{{title}}</div>
|
||||
</div>
|
||||
|
||||
<div class="image-section">
|
||||
<div class="image-container">
|
||||
<img src="{{image}}" alt="内容图片">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="text">{{text}}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
151
templates/1080x1080/vibrant_circle_1080x1080.html
Normal file
151
templates/1080x1080/vibrant_circle_1080x1080.html
Normal file
@@ -0,0 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080, height=1080">
|
||||
<title>活力圆形风格 - 1080x1080</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body { width: 1080px; height: 1080px; overflow: hidden; }
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 60px;
|
||||
}
|
||||
|
||||
/* 装饰圆形 */
|
||||
.deco-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.deco-circle-1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #ff6b6b;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.deco-circle-2 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: #4ecdc4;
|
||||
top: 15%;
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.deco-circle-3 {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
background: #ffe66d;
|
||||
bottom: 15%;
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.deco-circle-4 {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: #a8e6cf;
|
||||
bottom: 10%;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 68px;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* 圆形图片容器 */
|
||||
.image-section {
|
||||
width: 580px;
|
||||
height: 580px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 12px solid #ffffff;
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0,0,0,0.3),
|
||||
0 0 0 8px rgba(255,255,255,0.5);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 文字 */
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 38px;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.title { font-size: 60px; }
|
||||
.text { font-size: 34px; }
|
||||
.image-section { width: 520px; height: 520px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="deco-circle deco-circle-1"></div>
|
||||
<div class="deco-circle deco-circle-2"></div>
|
||||
<div class="deco-circle deco-circle-3"></div>
|
||||
<div class="deco-circle deco-circle-4"></div>
|
||||
|
||||
<div class="header">
|
||||
<div class="title">{{title}}</div>
|
||||
</div>
|
||||
|
||||
<div class="image-section">
|
||||
<div class="image-container">
|
||||
<img src="{{image}}" alt="内容图片">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="text">{{text}}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
125
templates/1080x1920/blur_card.html
Normal file
125
templates/1080x1920/blur_card.html
Normal file
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080, height=1920">
|
||||
<title>模糊背景卡片 - 1080x1920</title>
|
||||
<!-- Google Fonts - 中文字体 -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700;900&family=Noto+Serif+SC:wght@400;700;900&family=Liu+Jian+Mao+Cao&family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body { width: 1080px; height: 1920px; overflow: hidden; }
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans SC', 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
background: transparent; /* 移除黑色背景 */
|
||||
}
|
||||
|
||||
/* 背景使用图片并做模糊处理，完全覆盖整个页面 */
|
||||
.bg {
|
||||
position: fixed; /* 使用 fixed 确保完全覆盖 */
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('{{image}}');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(24px) brightness(0.65);
|
||||
transform: scale(1.1); /* 稍微放大防止边缘露出 */
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* 顶部标题区 */
|
||||
.top {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 26%;
|
||||
display: flex;
|
||||
align-items: center; /* 改为居中，避免被遮挡 */
|
||||
justify-content: center;
|
||||
padding: 60px 70px 40px; /* 减少顶部padding */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
max-width: 920px;
|
||||
font-size: 92px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
text-shadow: 0 6px 22px rgba(0,0,0,0.6);
|
||||
/* 使用 Ma Shan Zheng 毛笔字体 */
|
||||
font-family: 'Ma Shan Zheng', 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', cursive;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
/* 中部图片区（图片居中，填满宽度） */
|
||||
.image-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
max-height: 58%;
|
||||
z-index: 2;
|
||||
padding: 0 0; /* 无左右内边距 */
|
||||
}
|
||||
|
||||
.image-box { position: relative; width: 100%; height: 100%; }
|
||||
|
||||
.image-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; /* 改为 cover 填满宽度 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 底部字幕覆盖在图片底部 */
|
||||
.caption {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 18px;
|
||||
transform: translateX(-50%);
|
||||
width: 96%; /* 稍微调整以适应全宽图片 */
|
||||
text-align: center;
|
||||
font-size: 54px;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
color: #ffffff;
|
||||
font-family: 'ArtisticFont', 'Noto Serif SC', 'Noto Sans SC', 'PingFang SC', serif;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0 0 0 #000,
|
||||
-3px -3px 0 #000,
|
||||
3px -3px 0 #000,
|
||||
-3px 3px 0 #000,
|
||||
3px 3px 0 #000,
|
||||
0 10px 24px rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.title { font-size: 80px; }
|
||||
.caption { font-size: 48px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg"></div>
|
||||
|
||||
<div class="top">
|
||||
<div class="title">{{title}}</div>
|
||||
</div>
|
||||
|
||||
<div class="image-center">
|
||||
<div class="image-box">
|
||||
<img src="{{image}}" alt="内容图片">
|
||||
<div class="caption">{{text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
94
templates/1080x1920/book_banner.html
Normal file
94
templates/1080x1920/book_banner.html
Normal file
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080, height=1920">
|
||||
<title>书封横幅风 - 1080x1920</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body { width: 1080px; height: 1920px; overflow: hidden; }
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: #0f2b4e;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 顶部标题区 */
|
||||
.top {
|
||||
height: 28%;
|
||||
background: #0f2b4e; /* 深蓝 */
|
||||
padding: 80px 70px 40px 70px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.headline-main {
|
||||
font-weight: 900;
|
||||
font-size: 84px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 4px 18px rgba(0,0,0,0.35);
|
||||
}
|
||||
|
||||
/* 顶部分隔线 */
|
||||
.divider { height: 8px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25); }
|
||||
|
||||
/* 中部图片区 */
|
||||
.middle {
|
||||
height: 56%;
|
||||
background: #0c0f16;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-frame { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; }
|
||||
|
||||
.image-mask { position: absolute; inset: 0; padding: 28px 28px 100px 28px; }
|
||||
|
||||
.image-mask > .img { width: 100%; height: 100%; overflow: hidden; background: #121620; box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
|
||||
|
||||
.image-mask > .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
|
||||
/* 播放按钮装饰（可选视觉元素） */
|
||||
.play { position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,0.08); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.15); }
|
||||
.play:before { content: ''; width: 0; height: 0; border-left: 58px solid rgba(255,255,255,0.95); border-top: 38px solid transparent; border-bottom: 38px solid transparent; margin-left: 8px; }
|
||||
|
||||
/* 底部字幕条（仅 text 占位符）*/
|
||||
.caption-wrap { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; padding: 0 32px; pointer-events: none; }
|
||||
.caption { display: inline-block; max-width: 96%; font-size: 56px; font-weight: 900; line-height: 1.2; color: #ffffff; text-align: center; text-shadow: 0 0 0 #000, -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000, 0 8px 20px rgba(0,0,0,0.65); }
|
||||
|
||||
/* 底部留白区（不再显示品牌/其他占位符） */
|
||||
.bottom { height: 16%; background: #0f2b4e; }
|
||||
|
||||
@media (max-width: 1080px) { .headline-main { font-size: 72px; } .caption { font-size: 48px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top">
|
||||
<div class="headline-main">{{title}}</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="middle">
|
||||
<div class="image-frame">
|
||||
<div class="image-mask">
|
||||
<div class="img"><img src="{{image}}" alt="内容图片"></div>
|
||||
</div>
|
||||
<div class="play" aria-hidden="true"></div>
|
||||
<div class="caption-wrap"><div class="caption">{{text}}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom"></div>
|
||||
</body>
|
||||
</html>
|
||||
165
templates/1080x1920/fashion_vintage.html
Normal file
165
templates/1080x1920/fashion_vintage.html
Normal file
@@ -0,0 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080, height=1920">
|
||||
<title>时尚复古风格 - 1080x1920</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body { width: 1080px; height: 1920px; overflow: hidden; }
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #e8d5cc; /* 淡棕粉色背景 */
|
||||
}
|
||||
|
||||
/* 顶部标题区（约25%）*/
|
||||
.top {
|
||||
height: 25%;
|
||||
background: #e8d5cc; /* 淡棕粉色 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 60px;
|
||||
}
|
||||
|
||||
/* 装饰元素 */
|
||||
.decoration {
|
||||
position: absolute;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.decoration.leaf-left {
|
||||
left: 40px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: radial-gradient(circle, transparent 40%, #f5e8e0 40%, #f5e8e0 45%, transparent 45%);
|
||||
border-radius: 50% 50% 50% 0;
|
||||
clip-path: polygon(50% 0%, 80% 20%, 100% 50%, 80% 80%, 50% 100%, 20% 80%, 0% 50%, 20% 20%);
|
||||
}
|
||||
|
||||
.decoration.wave-right {
|
||||
right: 40px;
|
||||
top: 40%;
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, transparent, #f5e8e0 50%, transparent);
|
||||
border-radius: 50px;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
|
||||
.title-section {
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 88px;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
text-shadow: 0 2px 12px rgba(0,0,0,0.15);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* 中间图片区（约50%）*/
|
||||
.middle {
|
||||
height: 50%;
|
||||
background: #f8f6f4; /* 浅灰白色 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 底部文字区（约25%）*/
|
||||
.bottom {
|
||||
height: 25%;
|
||||
background: #e8d5cc; /* 与顶部相同颜色 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px;
|
||||
}
|
||||
|
||||
.bottom-decoration {
|
||||
position: absolute;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.bottom-decoration.leaf-right {
|
||||
right: 40px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: radial-gradient(circle, transparent 40%, #f5e8e0 40%, #f5e8e0 45%, transparent 45%);
|
||||
border-radius: 50% 50% 50% 0;
|
||||
clip-path: polygon(50% 0%, 80% 20%, 100% 50%, 80% 80%, 50% 100%, 20% 80%, 0% 50%, 20% 20%);
|
||||
}
|
||||
|
||||
.bottom-text {
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
font-size: 52px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
font-family: 'Brush Script MT', 'KaiTi', cursive; /* 手写体风格 */
|
||||
font-style: italic;
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.15);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.main-title { font-size: 76px; }
|
||||
.subtitle { font-size: 36px; }
|
||||
.bottom-text { font-size: 44px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部标题区 -->
|
||||
<div class="top">
|
||||
<div class="decoration leaf-left"></div>
|
||||
<div class="decoration wave-right"></div>
|
||||
<div class="title-section">
|
||||
<div class="main-title">{{title}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间图片区 -->
|
||||
<div class="middle">
|
||||
<div class="image-container">
|
||||
<img src="{{image}}" alt="内容图片">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部文字区 -->
|
||||
<div class="bottom">
|
||||
<div class="bottom-decoration leaf-right"></div>
|
||||
<div class="bottom-text">{{text}}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
408
templates/1080x1920/fresh_1080x1920.html
Normal file
408
templates/1080x1920/fresh_1080x1920.html
Normal file
@@ -0,0 +1,408 @@
|
||||
<!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: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #d1fae5 100%);
|
||||
font-family: 'Inter', 'PingFang SC', 'Source Han Sans', sans-serif;
|
||||
display: flex;
|
||||
position: relative;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
/* 背景装饰 */
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 清新光晕 */
|
||||
.fresh-glow {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(90px);
|
||||
}
|
||||
|
||||
.glow-1 {
|
||||
width: 750px;
|
||||
height: 750px;
|
||||
background: radial-gradient(circle, rgba(52, 211, 153, 0.25), transparent);
|
||||
top: -300px;
|
||||
left: -200px;
|
||||
}
|
||||
|
||||
.glow-2 {
|
||||
width: 650px;
|
||||
height: 650px;
|
||||
background: radial-gradient(circle, rgba(99, 240, 206, 0.2), transparent);
|
||||
bottom: 150px;
|
||||
right: -150px;
|
||||
}
|
||||
|
||||
.glow-3 {
|
||||
width: 550px;
|
||||
height: 550px;
|
||||
background: radial-gradient(circle, rgba(209, 250, 229, 0.3), transparent);
|
||||
top: 45%;
|
||||
right: 150px;
|
||||
}
|
||||
|
||||
/* 装饰叶子形状 */
|
||||
.leaf {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: rgba(52, 211, 153, 0.15);
|
||||
border-radius: 60% 0 60% 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.leaf-1 {
|
||||
top: 20%;
|
||||
right: 100px;
|
||||
box-shadow: 0 0 30px rgba(52, 211, 153, 0.2);
|
||||
}
|
||||
|
||||
.leaf-2 {
|
||||
bottom: 30%;
|
||||
left: 80px;
|
||||
transform: rotate(-30deg);
|
||||
box-shadow: 0 0 30px rgba(99, 240, 206, 0.2);
|
||||
}
|
||||
|
||||
/* 装饰圆形 */
|
||||
.circle-deco {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 3px solid rgba(52, 211, 153, 0.25);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 15%;
|
||||
right: 150px;
|
||||
box-shadow: 0 0 40px rgba(52, 211, 153, 0.15);
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
bottom: 25%;
|
||||
left: 120px;
|
||||
box-shadow: 0 0 40px rgba(99, 240, 206, 0.15);
|
||||
}
|
||||
|
||||
/* 装饰线条 */
|
||||
.wave-line {
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.4), transparent);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.wave-1 {
|
||||
width: 400px;
|
||||
top: 22%;
|
||||
left: 60px;
|
||||
transform: rotate(-10deg) scaleY(1.5);
|
||||
}
|
||||
|
||||
.wave-2 {
|
||||
width: 350px;
|
||||
top: 62%;
|
||||
right: 100px;
|
||||
transform: rotate(15deg) scaleY(1.5);
|
||||
}
|
||||
|
||||
/* 装饰点 */
|
||||
.dot {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(52, 211, 153, 0.4);
|
||||
}
|
||||
|
||||
.dot-1 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 18%;
|
||||
left: 200px;
|
||||
box-shadow: 0 0 20px rgba(52, 211, 153, 0.5);
|
||||
}
|
||||
|
||||
.dot-2 {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 58%;
|
||||
right: 180px;
|
||||
box-shadow: 0 0 20px rgba(99, 240, 206, 0.5);
|
||||
}
|
||||
|
||||
.dot-3 {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
bottom: 22%;
|
||||
left: 150px;
|
||||
box-shadow: 0 0 20px rgba(52, 211, 153, 0.5);
|
||||
}
|
||||
|
||||
/* 主容器 */
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 80px 60px 70px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 标题区域 */
|
||||
.header {
|
||||
margin-bottom: 70px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title-badge {
|
||||
display: inline-block;
|
||||
padding: 8px 24px;
|
||||
background: rgba(52, 211, 153, 0.15);
|
||||
border: 2px solid rgba(52, 211, 153, 0.4);
|
||||
border-radius: 30px;
|
||||
font-size: 22px;
|
||||
color: #059669;
|
||||
margin-bottom: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 78px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
color: #064e3b;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-shadow: 0 2px 10px rgba(52, 211, 153, 0.2);
|
||||
}
|
||||
|
||||
.title::before,
|
||||
.title::after {
|
||||
content: '🌿';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 40px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.title::before {
|
||||
left: -70px;
|
||||
}
|
||||
|
||||
.title::after {
|
||||
right: -70px;
|
||||
}
|
||||
|
||||
/* 图片区域 */
|
||||
.image-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 900px;
|
||||
height: 900px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
border-radius: 32px;
|
||||
overflow: hidden;
|
||||
border: 4px solid rgba(52, 211, 153, 0.2);
|
||||
box-shadow:
|
||||
0 25px 80px rgba(52, 211, 153, 0.15),
|
||||
0 10px 30px rgba(0, 0, 0, 0.06),
|
||||
inset 0 0 0 1px rgba(52, 211, 153, 0.1);
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 装饰角标 */
|
||||
.corner-leaf {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(52, 211, 153, 0.2);
|
||||
border-radius: 0 100% 0 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.corner-leaf.top-left {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.corner-leaf.bottom-right {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
border-radius: 100% 0 100% 0;
|
||||
background: rgba(99, 240, 206, 0.2);
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.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: 42px;
|
||||
font-weight: 500;
|
||||
line-height: 1.8;
|
||||
color: #065f46;
|
||||
max-width: 88%;
|
||||
position: relative;
|
||||
padding: 50px 60px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 30px;
|
||||
border: 2px solid rgba(52, 211, 153, 0.25);
|
||||
box-shadow:
|
||||
0 20px 50px rgba(52, 211, 153, 0.12),
|
||||
0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 底部装饰 */
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px 0 0;
|
||||
margin-top: auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.accent-circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #10b981, #34d399);
|
||||
box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
|
||||
.accent-circle:nth-child(1) { width: 14px; height: 14px; }
|
||||
.accent-circle:nth-child(2) { width: 10px; height: 10px; }
|
||||
.accent-circle:nth-child(3) { width: 12px; height: 12px; }
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 1080px) {
|
||||
.container {
|
||||
padding: 70px 50px 60px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 66px;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 36px;
|
||||
padding: 40px 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 背景装饰 -->
|
||||
<div class="bg-decoration">
|
||||
<div class="fresh-glow glow-1"></div>
|
||||
<div class="fresh-glow glow-2"></div>
|
||||
<div class="fresh-glow glow-3"></div>
|
||||
|
||||
<div class="leaf leaf-1"></div>
|
||||
<div class="leaf leaf-2"></div>
|
||||
|
||||
<div class="circle-deco circle-1"></div>
|
||||
<div class="circle-deco circle-2"></div>
|
||||
|
||||
<div class="wave-line wave-1"></div>
|
||||
<div class="wave-line wave-2"></div>
|
||||
|
||||
<div class="dot dot-1"></div>
|
||||
<div class="dot dot-2"></div>
|
||||
<div class="dot dot-3"></div>
|
||||
</div>
|
||||
|
||||
<!-- 主要内容容器 -->
|
||||
<div class="container">
|
||||
<!-- 标题区域 -->
|
||||
<div class="header">
|
||||
<div class="title-badge">NATURE</div>
|
||||
<div class="title">{{title}}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片区域 -->
|
||||
<div class="image-section">
|
||||
<div class="image-container">
|
||||
<img src="{{image}}" alt="内容图片">
|
||||
<div class="corner-leaf top-left"></div>
|
||||
<div class="corner-leaf bottom-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="content-section">
|
||||
<div class="content-text">{{text}}</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部装饰条 -->
|
||||
<div class="footer">
|
||||
<div class="accent-circle"></div>
|
||||
<div class="accent-circle"></div>
|
||||
<div class="accent-circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
145
templates/1080x1920/life_insights.html
Normal file
145
templates/1080x1920/life_insights.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
background: #000000;
|
||||
font-family: 'Noto Sans SC', 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', sans-serif;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 顶部标题区域 */
|
||||
.top-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 240px 60px 40px 60px;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.top-title-text {
|
||||
font-size: 80px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2px;
|
||||
font-family: 'Ma Shan Zheng', cursive;
|
||||
}
|
||||
|
||||
/* 中间图片区域 */
|
||||
.image-section {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 40px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.image-frame {
|
||||
width: 1000px;
|
||||
height: 800px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #FFFFFF;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 图片边框 - 白色，带老旧胶片感 */
|
||||
.image-frame::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 3px solid #FFFFFF;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 图片容器 - 固定尺寸，强制裁剪 */
|
||||
.image-container {
|
||||
width: 984px;
|
||||
height: 784px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 984px;
|
||||
height: 784px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 底部文字区域 */
|
||||
.bottom-text-section {
|
||||
width: 100%;
|
||||
padding: 0px 60px 90px 60px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 人生感悟 - 大红色粗体 */
|
||||
.highlight-text {
|
||||
font-size: 80px;
|
||||
color: #FF0000;
|
||||
font-weight: 400;
|
||||
letter-spacing: 3px;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
font-family: 'ZCOOL KuaiLe', cursive;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部标题 -->
|
||||
<div class="top-title">
|
||||
<div class="top-title-text">{{title}}</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间图片区域 -->
|
||||
<div class="image-section">
|
||||
<div class="image-frame">
|
||||
<div class="image-container">
|
||||
<img src="{{image}}" alt="Frame Image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部文字区域 -->
|
||||
<div class="bottom-text-section">
|
||||
<div class="highlight-text">{{text}}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
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>
|
||||
|
||||
92
templates/1080x1920/psychology_card.html
Normal file
92
templates/1080x1920/psychology_card.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080, height=1920">
|
||||
<title>心理卡片风 - 1080x1920</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body { width: 1080px; height: 1920px; overflow: hidden; }
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: #0a0a0a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
position: relative; /* 作为整页定位上下文 */
|
||||
}
|
||||
|
||||
/* 顶部黑底标题区 */
|
||||
.top {
|
||||
height: 30%;
|
||||
background: #0a0a0a;
|
||||
padding: 100px 70px 40px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
max-width: 920px;
|
||||
font-size: 96px;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 2px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 6px 22px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* 中部容器可保持为空壳，仅用于分区 */
|
||||
.middle { height: 70%; }
|
||||
|
||||
/* 将图片中心对齐到整页正中心（与标题无关） */
|
||||
.media {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
max-width: 86%;
|
||||
max-height: 58%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.media img { width: 100%; height: 100%; object-fit: contain; display: block; }
|
||||
|
||||
/* 字幕移动到上方红框区域（大致页面下部的上方位置） */
|
||||
.caption {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 320px; /* 向上移动至上方槽位 */
|
||||
transform: translateX(-50%);
|
||||
width: 86%; /* 与图片宽度对齐 */
|
||||
max-width: 930px;
|
||||
text-align: center;
|
||||
font-size: 54px;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
color: #fefefe;
|
||||
text-shadow: 0 0 0 #000,
|
||||
-3px -3px 0 #000,
|
||||
3px -3px 0 #000,
|
||||
-3px 3px 0 #000,
|
||||
3px 3px 0 #000;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) { .title { font-size: 84px; } .caption { font-size: 48px; bottom: 300px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top">
|
||||
<div class="title">{{title}}</div>
|
||||
</div>
|
||||
|
||||
<div class="middle"></div>
|
||||
|
||||
<div class="media"><img src="{{image}}" alt="内容图片"></div>
|
||||
<div class="caption">{{text}}</div>
|
||||
</body>
|
||||
</html>
|
||||
195
templates/1920x1080/ultrawide_minimal_2560x1080.html
Normal file
195
templates/1920x1080/ultrawide_minimal_2560x1080.html
Normal file
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>视频模板 - 极简风格</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #ffffff;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.4fr 1fr;
|
||||
gap: 60px;
|
||||
padding: 70px 80px;
|
||||
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: 25%;
|
||||
left: 150px;
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
|
||||
.line-2 {
|
||||
width: 550px;
|
||||
height: 1px;
|
||||
bottom: 30%;
|
||||
right: 200px;
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000000;
|
||||
opacity: 0.03;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
top: -200px;
|
||||
right: 300px;
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
bottom: -150px;
|
||||
left: 400px;
|
||||
}
|
||||
|
||||
/* 左侧标题区 */
|
||||
.left-section {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title-accent {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
letter-spacing: 6px;
|
||||
margin-bottom: 25px;
|
||||
font-weight: 300;
|
||||
opacity: 0.4;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 96px;
|
||||
font-weight: 300;
|
||||
line-height: 1.1;
|
||||
color: #000000;
|
||||
letter-spacing: -4px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.title-underline {
|
||||
width: 180px;
|
||||
height: 2px;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
/* 中间图片区 */
|
||||
.center-section {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 右侧文字区 */
|
||||
.right-section {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
font-size: 48px;
|
||||
font-weight: 300;
|
||||
line-height: 1.8;
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.text-underline {
|
||||
margin-top: 40px;
|
||||
width: 140px;
|
||||
height: 2px;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-decoration">
|
||||
<div class="minimal-line line-1"></div>
|
||||
<div class="minimal-line line-2"></div>
|
||||
<div class="circle circle-1"></div>
|
||||
<div class="circle circle-2"></div>
|
||||
</div>
|
||||
|
||||
<!-- 左侧标题 -->
|
||||
<div class="left-section">
|
||||
<div class="title-accent">SIMPLE</div>
|
||||
<div class="main-title">{{title}}</div>
|
||||
<div class="title-underline"></div>
|
||||
</div>
|
||||
|
||||
<!-- 中间图片 -->
|
||||
<div class="center-section">
|
||||
<div class="image-container">
|
||||
<img src="{{image}}" alt="内容图片">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧文字 -->
|
||||
<div class="right-section">
|
||||
<div class="text-content">{{text}}</div>
|
||||
<div class="text-underline"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
306
templates/1920x1080/wide_darktech.html
Normal file
306
templates/1920x1080/wide_darktech.html
Normal file
@@ -0,0 +1,306 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920, height=1080">
|
||||
<title>视频模板 - 横屏科技风格</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0a0f1f;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.2fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
padding: 60px 80px;
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 背景装饰 */
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.grid-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
|
||||
.glow-orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(100px);
|
||||
}
|
||||
|
||||
.orb-1 {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
top: -400px;
|
||||
right: 200px;
|
||||
}
|
||||
|
||||
.orb-2 {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: rgba(147, 51, 234, 0.15);
|
||||
bottom: -200px;
|
||||
left: -100px;
|
||||
}
|
||||
|
||||
.hexagon {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 69px;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.08));
|
||||
border: 2px solid rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.hexagon::before,
|
||||
.hexagon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
border-left: 60px solid transparent;
|
||||
border-right: 60px solid transparent;
|
||||
}
|
||||
|
||||
.hexagon::before {
|
||||
bottom: 100%;
|
||||
border-bottom: 34.64px solid rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.hexagon::after {
|
||||
top: 100%;
|
||||
border-top: 34.64px solid rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.hex-1 { top: 20%; right: 150px; transform: rotate(30deg); }
|
||||
.hex-2 { bottom: 15%; right: 300px; transform: rotate(-20deg); }
|
||||
|
||||
/* 左侧内容区 */
|
||||
.left-content {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 12px 28px;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.1));
|
||||
border: 1px solid rgba(59, 130, 246, 0.4);
|
||||
border-radius: 30px;
|
||||
font-size: 18px;
|
||||
color: #60a5fa;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 96px;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #93c5fd 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 30px;
|
||||
letter-spacing: -3px;
|
||||
filter: drop-shadow(0 0 40px rgba(59, 130, 246, 0.3));
|
||||
}
|
||||
|
||||
.main-title::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 150px;
|
||||
height: 6px;
|
||||
background: linear-gradient(90deg, transparent, #3b82f6, transparent);
|
||||
margin-top: 30px;
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 48px;
|
||||
line-height: 1.8;
|
||||
color: #cbd5e1;
|
||||
margin-top: 60px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 右侧图片区 */
|
||||
.right-image {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6));
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
border: 3px solid rgba(59, 130, 246, 0.3);
|
||||
box-shadow:
|
||||
0 30px 80px rgba(0, 0, 0, 0.6),
|
||||
0 0 120px rgba(59, 130, 246, 0.2),
|
||||
inset 0 0 60px rgba(59, 130, 246, 0.05);
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 科技角标 */
|
||||
.image-container::before,
|
||||
.image-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 4px solid #3b82f6;
|
||||
z-index: 10;
|
||||
box-shadow: 0 0 30px rgba(59, 130, 246, 0.8);
|
||||
}
|
||||
|
||||
.image-container::before {
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
border-radius: 12px 0 0 0;
|
||||
}
|
||||
|
||||
.image-container::after {
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-radius: 0 0 12px 0;
|
||||
}
|
||||
|
||||
/* 底部装饰 */
|
||||
.footer {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 3;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 40px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.footer-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #3b82f6;
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.accent-bar {
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(90deg, #3b82f6, #9333ea);
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
|
||||
}
|
||||
|
||||
.bar-1 { width: 120px; }
|
||||
.bar-2 { width: 80px; }
|
||||
.bar-3 { width: 100px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-decoration">
|
||||
<div class="grid-overlay"></div>
|
||||
<div class="glow-orb orb-1"></div>
|
||||
<div class="glow-orb orb-2"></div>
|
||||
<div class="hexagon hex-1"></div>
|
||||
<div class="hexagon hex-2"></div>
|
||||
</div>
|
||||
|
||||
<!-- 左侧内容 -->
|
||||
<div class="left-content">
|
||||
<div class="badge">PROTOTYPE</div>
|
||||
<div class="main-title">{{title}}</div>
|
||||
<div class="description">{{text}}</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧图片 -->
|
||||
<div class="right-image">
|
||||
<div class="image-wrapper">
|
||||
<div class="image-container">
|
||||
<img src="{{image}}" alt="内容图片">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部装饰 -->
|
||||
<div class="footer">
|
||||
<div class="footer-left">
|
||||
<div class="footer-dot"></div>
|
||||
<div class="footer-dot"></div>
|
||||
<div class="footer-dot"></div>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<div class="accent-bar bar-1"></div>
|
||||
<div class="accent-bar bar-2"></div>
|
||||
<div class="accent-bar bar-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,177 +0,0 @@
|
||||
{
|
||||
"29": {
|
||||
"inputs": {
|
||||
"seed": 1067822190154760,
|
||||
"steps": 20,
|
||||
"cfg": 1,
|
||||
"sampler_name": "euler",
|
||||
"scheduler": "simple",
|
||||
"denoise": 1,
|
||||
"model": [
|
||||
"48",
|
||||
0
|
||||
],
|
||||
"positive": [
|
||||
"35",
|
||||
0
|
||||
],
|
||||
"negative": [
|
||||
"33",
|
||||
0
|
||||
],
|
||||
"latent_image": [
|
||||
"43",
|
||||
0
|
||||
]
|
||||
},
|
||||
"class_type": "KSampler",
|
||||
"_meta": {
|
||||
"title": "KSampler"
|
||||
}
|
||||
},
|
||||
"31": {
|
||||
"inputs": {
|
||||
"text": [
|
||||
"46",
|
||||
0
|
||||
],
|
||||
"clip": [
|
||||
"47",
|
||||
0
|
||||
]
|
||||
},
|
||||
"class_type": "CLIPTextEncode",
|
||||
"_meta": {
|
||||
"title": "CLIP Text Encode (Prompt)"
|
||||
}
|
||||
},
|
||||
"33": {
|
||||
"inputs": {
|
||||
"conditioning": [
|
||||
"31",
|
||||
0
|
||||
]
|
||||
},
|
||||
"class_type": "ConditioningZeroOut",
|
||||
"_meta": {
|
||||
"title": "ConditioningZeroOut"
|
||||
}
|
||||
},
|
||||
"35": {
|
||||
"inputs": {
|
||||
"guidance": 3.5,
|
||||
"conditioning": [
|
||||
"31",
|
||||
0
|
||||
]
|
||||
},
|
||||
"class_type": "FluxGuidance",
|
||||
"_meta": {
|
||||
"title": "FluxGuidance"
|
||||
}
|
||||
},
|
||||
"36": {
|
||||
"inputs": {
|
||||
"filename_prefix": "ComfyUI",
|
||||
"images": [
|
||||
"37",
|
||||
0
|
||||
]
|
||||
},
|
||||
"class_type": "SaveImage",
|
||||
"_meta": {
|
||||
"title": "Save Image"
|
||||
}
|
||||
},
|
||||
"37": {
|
||||
"inputs": {
|
||||
"samples": [
|
||||
"29",
|
||||
0
|
||||
],
|
||||
"vae": [
|
||||
"49",
|
||||
0
|
||||
]
|
||||
},
|
||||
"class_type": "VAEDecode",
|
||||
"_meta": {
|
||||
"title": "VAE Decode"
|
||||
}
|
||||
},
|
||||
"41": {
|
||||
"inputs": {
|
||||
"value": 1024
|
||||
},
|
||||
"class_type": "easy int",
|
||||
"_meta": {
|
||||
"title": "$width.value"
|
||||
}
|
||||
},
|
||||
"42": {
|
||||
"inputs": {
|
||||
"value": 1024
|
||||
},
|
||||
"class_type": "easy int",
|
||||
"_meta": {
|
||||
"title": "$height.value"
|
||||
}
|
||||
},
|
||||
"43": {
|
||||
"inputs": {
|
||||
"width": [
|
||||
"41",
|
||||
0
|
||||
],
|
||||
"height": [
|
||||
"42",
|
||||
0
|
||||
],
|
||||
"batch_size": 1
|
||||
},
|
||||
"class_type": "EmptyLatentImage",
|
||||
"_meta": {
|
||||
"title": "Empty Latent Image"
|
||||
}
|
||||
},
|
||||
"46": {
|
||||
"inputs": {
|
||||
"value": "Minimalist black-and-white matchstick figure style illustration, clean lines, simple sketch style, a dog"
|
||||
},
|
||||
"class_type": "PrimitiveStringMultiline",
|
||||
"_meta": {
|
||||
"title": "$prompt.value!"
|
||||
}
|
||||
},
|
||||
"47": {
|
||||
"inputs": {
|
||||
"clip_name1": "clip_l.safetensors",
|
||||
"clip_name2": "t5xxl_fp8_e4m3fn.safetensors",
|
||||
"type": "flux",
|
||||
"device": "default"
|
||||
},
|
||||
"class_type": "DualCLIPLoader",
|
||||
"_meta": {
|
||||
"title": "DualCLIPLoader"
|
||||
}
|
||||
},
|
||||
"48": {
|
||||
"inputs": {
|
||||
"unet_name": "flux1-dev.safetensors",
|
||||
"weight_dtype": "default"
|
||||
},
|
||||
"class_type": "UNETLoader",
|
||||
"_meta": {
|
||||
"title": "Load Diffusion Model"
|
||||
}
|
||||
},
|
||||
"49": {
|
||||
"inputs": {
|
||||
"vae_name": "ae.safetensors"
|
||||
},
|
||||
"class_type": "VAELoader",
|
||||
"_meta": {
|
||||
"title": "Load VAE"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
{
|
||||
"1": {
|
||||
"inputs": {
|
||||
"text": [
|
||||
"3",
|
||||
0
|
||||
],
|
||||
"voice": [
|
||||
"5",
|
||||
0
|
||||
],
|
||||
"speed": [
|
||||
"8",
|
||||
0
|
||||
],
|
||||
"pitch": 0
|
||||
},
|
||||
"class_type": "EdgeTTS",
|
||||
"_meta": {
|
||||
"title": "Edge TTS 🔊"
|
||||
}
|
||||
},
|
||||
"3": {
|
||||
"inputs": {
|
||||
"value": "床前明月光，疑是地上霜。"
|
||||
},
|
||||
"class_type": "PrimitiveStringMultiline",
|
||||
"_meta": {
|
||||
"title": "$text.value!"
|
||||
}
|
||||
},
|
||||
"4": {
|
||||
"inputs": {
|
||||
"filename_prefix": "audio/ComfyUI",
|
||||
"quality": "V0",
|
||||
"audioUI": "",
|
||||
"audio": [
|
||||
"1",
|
||||
0
|
||||
]
|
||||
},
|
||||
"class_type": "SaveAudioMP3",
|
||||
"_meta": {
|
||||
"title": "Save Audio (MP3)"
|
||||
}
|
||||
},
|
||||
"5": {
|
||||
"inputs": {
|
||||
"text": "[Chinese] zh-CN Yunjian",
|
||||
"anything": [
|
||||
"7",
|
||||
0
|
||||
]
|
||||
},
|
||||
"class_type": "easy showAnything",
|
||||
"_meta": {
|
||||
"title": "Show Any"
|
||||
}
|
||||
},
|
||||
"7": {
|
||||
"inputs": {
|
||||
"value": "[Chinese] zh-CN Yunjian"
|
||||
},
|
||||
"class_type": "PrimitiveStringMultiline",
|
||||
"_meta": {
|
||||
"title": "$voice.value"
|
||||
}
|
||||
},
|
||||
"8": {
|
||||
"inputs": {
|
||||
"value": 1
|
||||
},
|
||||
"class_type": "easy float",
|
||||
"_meta": {
|
||||
"title": "$speed.value"
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user