let5see/AI-Video
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: templates

Browse Source
This commit is contained in:
li
2025-11-06 20:56:21 +08:00
committed by puke
parent 8a2e4d3b0e
commit cd8e433e25
2 changed files with 93 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
templates/1080x1920/blur_card.html
View File

@@ -23,16 +23,16 @@
/* 背景使用图片并做模糊处理，完全覆盖整个页面 */ /* 背景使用图片并做模糊处理，完全覆盖整个页面 */
.bg { .bg {
position: fixed; /* 使用 fixed 确保完全覆盖 */ position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url('{{image}}'); background-image: url("{{image}}");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
filter: blur(24px) brightness(0.65); filter: blur(24px) brightness(0.9);
transform: scale(1.1); /* 稍微放大防止边缘露出 */ transform: scale(1.1);
z-index: 0; z-index: 0;
} }
@@ -66,7 +66,7 @@
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 100%; width: 100%;
max-height: 58%; height: 58%;
z-index: 2; z-index: 2;
padding: 0 0; /* 无左右内边距 */ padding: 0 0; /* 无左右内边距 */
} }
@@ -110,7 +110,6 @@
</head> </head>
<body> <body>
<div class="bg"></div> <div class="bg"></div>
<div class="top"> <div class="top">
<div class="title">{{title}}</div> <div class="title">{{title}}</div>
</div> </div>

88
templates/1920x1080/film.html Normal file
View File

@@ -0,0 +1,88 @@
<!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: black;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
position: relative;
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
position: absolute;
top: -30px;
left: 50%;
transform: translate(-50%, -100%);
max-width: 90%;
text-align: center;
font-size: 80px;
font-weight: 800;
line-height: 1.2;
text-shadow: 0 6px 22px rgba(0,0,0,0.6);
letter-spacing: 4px;
}
.main {
position: relative;
width: 100%;
height: 70%;
/*display: block;*/
}
.main img {
width: 100%;
height: 100%;
object-fit: cover; /* 改为 cover 填满宽度 */
display: block;
}
.text {
position: absolute;
top: 102%;
left: 50%;
transform: translate(-50%, 0);
max-width: 90%; /* 稍微调整以适应全宽图片 */
text-align: center;
font-size: 40px;
font-weight: 400;
line-height: 1.2;
color: #ffffff;
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);
}
</style>
</head>
<body>
<div class="main">
<div class="title">{{title}}</div>
<img src="{{image}}" alt="内容图片">
<div class="text">{{text}}</div>
</div>
</body>
</html>