1596 lines
47 KiB
HTML
1596 lines
47 KiB
HTML
<!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: #0a0e27;
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
|
|
display: flex;
|
|
position: relative;
|
|
color: #ffffff;
|
|
animation: subtle-glow 8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes subtle-glow {
|
|
0%, 100% { background: #0a0e27; }
|
|
50% { background: #0d1230; }
|
|
}
|
|
|
|
/* 几何装饰背景 - 增强版 */
|
|
.bg-decoration {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
.geometric-shape {
|
|
position: absolute;
|
|
opacity: 0.2;
|
|
filter: blur(0px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.shape-1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: #00d4ff;
|
|
top: -100px;
|
|
right: -100px;
|
|
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
|
animation: rotate-glow 30s linear infinite;
|
|
box-shadow:
|
|
0 0 60px rgba(0, 212, 255, 0.4),
|
|
0 0 120px rgba(0, 212, 255, 0.2),
|
|
inset 0 0 40px rgba(0, 212, 255, 0.3);
|
|
}
|
|
|
|
.shape-2 {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: #7c3aed;
|
|
bottom: 200px;
|
|
left: -80px;
|
|
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
|
animation: rotate-pulse 25s ease-in-out infinite;
|
|
box-shadow:
|
|
0 0 50px rgba(124, 58, 237, 0.5),
|
|
0 0 100px rgba(124, 58, 237, 0.3),
|
|
inset 0 0 30px rgba(124, 58, 237, 0.4);
|
|
}
|
|
|
|
.shape-3 {
|
|
width: 200px;
|
|
height: 200px;
|
|
background: #f97316;
|
|
top: 50%;
|
|
right: 50px;
|
|
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
|
animation: float-glow 20s ease-in-out infinite;
|
|
box-shadow:
|
|
0 0 40px rgba(249, 115, 22, 0.6),
|
|
0 0 80px rgba(249, 115, 22, 0.3),
|
|
inset 0 0 25px rgba(249, 115, 22, 0.4);
|
|
}
|
|
|
|
/* 新增几何装饰元素 */
|
|
.shape-4 {
|
|
width: 150px;
|
|
height: 150px;
|
|
background: #10b981;
|
|
top: 25%;
|
|
left: 100px;
|
|
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
|
animation: spin-glow 35s linear infinite;
|
|
box-shadow:
|
|
0 0 45px rgba(16, 185, 129, 0.5),
|
|
0 0 90px rgba(16, 185, 129, 0.25);
|
|
}
|
|
|
|
.shape-5 {
|
|
width: 180px;
|
|
height: 180px;
|
|
background: #ec4899;
|
|
bottom: 30%;
|
|
right: 120px;
|
|
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
|
animation: pulse-float 28s ease-in-out infinite;
|
|
box-shadow:
|
|
0 0 55px rgba(236, 72, 153, 0.5),
|
|
0 0 110px rgba(236, 72, 153, 0.25);
|
|
}
|
|
|
|
/* 粒子装饰 */
|
|
.particle {
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 4px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 0 10px rgba(255, 255, 255, 0.8),
|
|
0 0 20px rgba(0, 212, 255, 0.5);
|
|
animation: float-particle 15s ease-in-out infinite;
|
|
}
|
|
|
|
.particle-1 {
|
|
top: 20%;
|
|
left: 15%;
|
|
animation-delay: 0s;
|
|
background: #00d4ff;
|
|
box-shadow:
|
|
0 0 15px rgba(0, 212, 255, 0.9),
|
|
0 0 30px rgba(0, 212, 255, 0.5);
|
|
}
|
|
.particle-2 {
|
|
top: 40%;
|
|
right: 20%;
|
|
animation-delay: 2s;
|
|
background: #7c3aed;
|
|
box-shadow:
|
|
0 0 15px rgba(124, 58, 237, 0.9),
|
|
0 0 30px rgba(124, 58, 237, 0.5);
|
|
}
|
|
.particle-3 {
|
|
bottom: 30%;
|
|
left: 25%;
|
|
animation-delay: 4s;
|
|
background: #f97316;
|
|
box-shadow:
|
|
0 0 15px rgba(249, 115, 22, 0.9),
|
|
0 0 30px rgba(249, 115, 22, 0.5);
|
|
}
|
|
.particle-4 {
|
|
top: 60%;
|
|
right: 15%;
|
|
animation-delay: 6s;
|
|
background: #10b981;
|
|
box-shadow:
|
|
0 0 15px rgba(16, 185, 129, 0.9),
|
|
0 0 30px rgba(16, 185, 129, 0.5);
|
|
}
|
|
.particle-5 {
|
|
bottom: 45%;
|
|
left: 40%;
|
|
animation-delay: 8s;
|
|
background: #ec4899;
|
|
box-shadow:
|
|
0 0 15px rgba(236, 72, 153, 0.9),
|
|
0 0 30px rgba(236, 72, 153, 0.5);
|
|
}
|
|
|
|
/* 装饰点簇 - 借鉴elegant.html */
|
|
.dot-cluster {
|
|
position: absolute;
|
|
display: flex;
|
|
gap: 12px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dot-cluster-1 {
|
|
top: 10%;
|
|
left: 8%;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dot-cluster-2 {
|
|
top: 15%;
|
|
right: 10%;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.dot-cluster-3 {
|
|
bottom: 12%;
|
|
left: 12%;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.dot-cluster-4 {
|
|
bottom: 18%;
|
|
right: 8%;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cluster-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: #00d4ff;
|
|
box-shadow: 0 0 12px rgba(0, 212, 255, 0.7);
|
|
animation: cluster-dot-pulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
.cluster-dot:nth-child(1) { animation-delay: 0s; }
|
|
.cluster-dot:nth-child(2) { animation-delay: 0.5s; background: #7c3aed; box-shadow: 0 0 12px rgba(124, 58, 237, 0.7); }
|
|
.cluster-dot:nth-child(3) { animation-delay: 1s; background: #f97316; box-shadow: 0 0 12px rgba(249, 115, 22, 0.7); }
|
|
|
|
@keyframes cluster-dot-pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 0.6;
|
|
box-shadow: 0 0 12px currentColor;
|
|
}
|
|
50% {
|
|
transform: scale(1.4);
|
|
opacity: 1;
|
|
box-shadow: 0 0 20px currentColor;
|
|
}
|
|
}
|
|
|
|
/* 小型装饰圆环 */
|
|
.ring-decoration {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
border: 2px solid;
|
|
z-index: 1;
|
|
animation: ring-rotate 20s linear infinite;
|
|
}
|
|
|
|
.ring-1 {
|
|
width: 80px;
|
|
height: 80px;
|
|
top: 8%;
|
|
right: 15%;
|
|
border-color: rgba(0, 212, 255, 0.4);
|
|
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
|
|
}
|
|
|
|
.ring-2 {
|
|
width: 60px;
|
|
height: 60px;
|
|
bottom: 10%;
|
|
left: 18%;
|
|
border-color: rgba(124, 58, 237, 0.4);
|
|
box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
|
|
animation-delay: 5s;
|
|
}
|
|
|
|
.ring-3 {
|
|
width: 100px;
|
|
height: 100px;
|
|
top: 70%;
|
|
left: 5%;
|
|
border-color: rgba(249, 115, 22, 0.3);
|
|
box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
|
|
animation-delay: 10s;
|
|
}
|
|
|
|
@keyframes ring-rotate {
|
|
0% {
|
|
transform: rotate(0deg) scale(1);
|
|
opacity: 0.4;
|
|
}
|
|
50% {
|
|
transform: rotate(180deg) scale(1.1);
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
transform: rotate(360deg) scale(1);
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
/* 装饰性小方块 */
|
|
.square-deco {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: rgba(0, 212, 255, 0.5);
|
|
z-index: 1;
|
|
animation: square-float 5s ease-in-out infinite;
|
|
}
|
|
|
|
.square-1 {
|
|
top: 12%;
|
|
left: 5%;
|
|
transform: rotate(45deg);
|
|
box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
|
|
}
|
|
|
|
.square-2 {
|
|
top: 65%;
|
|
right: 8%;
|
|
transform: rotate(25deg);
|
|
background: rgba(124, 58, 237, 0.5);
|
|
box-shadow: 0 0 15px rgba(124, 58, 237, 0.6);
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
.square-3 {
|
|
bottom: 8%;
|
|
right: 12%;
|
|
transform: rotate(60deg);
|
|
background: rgba(249, 115, 22, 0.5);
|
|
box-shadow: 0 0 15px rgba(249, 115, 22, 0.6);
|
|
animation-delay: 3s;
|
|
}
|
|
|
|
@keyframes square-float {
|
|
0%, 100% {
|
|
transform: translateY(0) rotate(45deg);
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
transform: translateY(-15px) rotate(225deg);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
/* 装饰性三角形 */
|
|
.triangle-deco {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
z-index: 1;
|
|
filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.6));
|
|
animation: triangle-spin 15s linear infinite;
|
|
}
|
|
|
|
.triangle-1 {
|
|
top: 18%;
|
|
left: 12%;
|
|
border-width: 0 8px 14px 8px;
|
|
border-color: transparent transparent rgba(0, 212, 255, 0.5) transparent;
|
|
}
|
|
|
|
.triangle-2 {
|
|
bottom: 25%;
|
|
right: 10%;
|
|
border-width: 14px 8px 0 8px;
|
|
border-color: rgba(236, 72, 153, 0.5) transparent transparent transparent;
|
|
filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.6));
|
|
animation-delay: 7s;
|
|
}
|
|
|
|
@keyframes triangle-spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
transform: rotate(180deg);
|
|
opacity: 0.8;
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
/* 装饰性波浪线 - 借鉴elegant.html */
|
|
.wave-line {
|
|
position: absolute;
|
|
height: 2px;
|
|
border-radius: 10px;
|
|
z-index: 1;
|
|
opacity: 0.4;
|
|
animation: wave-flow 6s ease-in-out infinite;
|
|
}
|
|
|
|
.wave-1 {
|
|
width: 300px;
|
|
top: 22%;
|
|
left: 5%;
|
|
background: rgba(0, 212, 255, 0.5);
|
|
box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
.wave-2 {
|
|
width: 250px;
|
|
top: 68%;
|
|
right: 5%;
|
|
background: rgba(124, 58, 237, 0.5);
|
|
box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
|
|
transform: rotate(8deg);
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.wave-3 {
|
|
width: 200px;
|
|
bottom: 15%;
|
|
left: 8%;
|
|
background: rgba(249, 115, 22, 0.4);
|
|
box-shadow: 0 0 15px rgba(249, 115, 22, 0.3);
|
|
transform: rotate(-3deg);
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
@keyframes wave-flow {
|
|
0%, 100% {
|
|
opacity: 0.3;
|
|
transform: translateX(0) rotate(var(--rotate, 0deg));
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
transform: translateX(20px) rotate(var(--rotate, 0deg));
|
|
}
|
|
}
|
|
|
|
/* 星形装饰 */
|
|
.star-deco {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
z-index: 1;
|
|
animation: star-twinkle 4s ease-in-out infinite;
|
|
}
|
|
|
|
.star-deco::before,
|
|
.star-deco::after {
|
|
content: '';
|
|
position: absolute;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.star-deco::before {
|
|
width: 2px;
|
|
height: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.star-deco::after {
|
|
width: 100%;
|
|
height: 2px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.star-1 {
|
|
top: 14%;
|
|
right: 8%;
|
|
filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.8));
|
|
}
|
|
|
|
.star-2 {
|
|
top: 72%;
|
|
left: 7%;
|
|
filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.8));
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.star-3 {
|
|
bottom: 20%;
|
|
right: 15%;
|
|
width: 15px;
|
|
height: 15px;
|
|
filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.8));
|
|
animation-delay: 3s;
|
|
}
|
|
|
|
@keyframes star-twinkle {
|
|
0%, 100% {
|
|
transform: scale(1) rotate(0deg);
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
transform: scale(1.3) rotate(90deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 小型发光点 */
|
|
.glow-dot {
|
|
position: absolute;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
animation: glow-pulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
.glow-1 {
|
|
top: 25%;
|
|
left: 4%;
|
|
background: rgba(0, 212, 255, 0.7);
|
|
box-shadow: 0 0 15px rgba(0, 212, 255, 0.9);
|
|
}
|
|
|
|
.glow-2 {
|
|
top: 35%;
|
|
right: 6%;
|
|
background: rgba(124, 58, 237, 0.7);
|
|
box-shadow: 0 0 15px rgba(124, 58, 237, 0.9);
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.glow-3 {
|
|
top: 55%;
|
|
left: 3%;
|
|
background: rgba(16, 185, 129, 0.7);
|
|
box-shadow: 0 0 15px rgba(16, 185, 129, 0.9);
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.glow-4 {
|
|
bottom: 28%;
|
|
right: 4%;
|
|
background: rgba(249, 115, 22, 0.7);
|
|
box-shadow: 0 0 15px rgba(249, 115, 22, 0.9);
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
.glow-5 {
|
|
bottom: 35%;
|
|
left: 6%;
|
|
background: rgba(236, 72, 153, 0.7);
|
|
box-shadow: 0 0 15px rgba(236, 72, 153, 0.9);
|
|
animation-delay: 2.5s;
|
|
}
|
|
|
|
@keyframes glow-pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 0.5;
|
|
box-shadow: 0 0 15px currentColor;
|
|
}
|
|
50% {
|
|
transform: scale(1.6);
|
|
opacity: 1;
|
|
box-shadow: 0 0 25px currentColor;
|
|
}
|
|
}
|
|
|
|
/* 十字装饰 */
|
|
.cross-deco {
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
z-index: 1;
|
|
animation: cross-rotate 10s linear infinite;
|
|
}
|
|
|
|
.cross-deco::before,
|
|
.cross-deco::after {
|
|
content: '';
|
|
position: absolute;
|
|
background: rgba(0, 212, 255, 0.5);
|
|
box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
|
|
}
|
|
|
|
.cross-deco::before {
|
|
width: 2px;
|
|
height: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.cross-deco::after {
|
|
width: 100%;
|
|
height: 2px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.cross-1 {
|
|
top: 30%;
|
|
left: 10%;
|
|
}
|
|
|
|
.cross-2 {
|
|
top: 50%;
|
|
right: 12%;
|
|
}
|
|
|
|
.cross-2::before,
|
|
.cross-2::after {
|
|
background: rgba(124, 58, 237, 0.5);
|
|
box-shadow: 0 0 10px rgba(124, 58, 237, 0.6);
|
|
}
|
|
|
|
@keyframes cross-rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
opacity: 0.4;
|
|
}
|
|
50% {
|
|
transform: rotate(180deg);
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
/* 弧形装饰线 */
|
|
.arc-deco {
|
|
position: absolute;
|
|
border: 2px solid;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
animation: arc-breathe 5s ease-in-out infinite;
|
|
}
|
|
|
|
.arc-1 {
|
|
width: 120px;
|
|
height: 120px;
|
|
top: 8%;
|
|
left: 15%;
|
|
border-color: transparent rgba(0, 212, 255, 0.4) transparent transparent;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.arc-2 {
|
|
width: 90px;
|
|
height: 90px;
|
|
bottom: 12%;
|
|
right: 18%;
|
|
border-color: transparent transparent rgba(124, 58, 237, 0.4) transparent;
|
|
transform: rotate(-30deg);
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
.arc-3 {
|
|
width: 70px;
|
|
height: 70px;
|
|
top: 75%;
|
|
right: 5%;
|
|
border-color: transparent transparent transparent rgba(249, 115, 22, 0.4);
|
|
transform: rotate(120deg);
|
|
animation-delay: 3s;
|
|
}
|
|
|
|
@keyframes arc-breathe {
|
|
0%, 100% {
|
|
opacity: 0.3;
|
|
transform: rotate(var(--base-rotate, 0deg)) scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
transform: rotate(var(--base-rotate, 0deg)) scale(1.15);
|
|
}
|
|
}
|
|
|
|
/* 微小装饰点 */
|
|
.micro-dot {
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
|
|
z-index: 1;
|
|
animation: micro-twinkle 4s ease-in-out infinite;
|
|
}
|
|
|
|
.micro-1 { top: 17%; left: 20%; animation-delay: 0s; }
|
|
.micro-2 { top: 28%; right: 25%; animation-delay: 0.5s; }
|
|
.micro-3 { top: 45%; left: 8%; animation-delay: 1s; }
|
|
.micro-4 { top: 62%; right: 20%; animation-delay: 1.5s; }
|
|
.micro-5 { bottom: 22%; left: 15%; animation-delay: 2s; }
|
|
.micro-6 { bottom: 32%; right: 8%; animation-delay: 2.5s; }
|
|
.micro-7 { top: 38%; left: 12%; animation-delay: 3s; }
|
|
.micro-8 { bottom: 40%; right: 18%; animation-delay: 3.5s; }
|
|
|
|
@keyframes micro-twinkle {
|
|
0%, 100% {
|
|
opacity: 0.3;
|
|
transform: scale(0.8);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
|
|
/* 虚线装饰边框 */
|
|
.dashed-border {
|
|
position: absolute;
|
|
border: 1px dashed;
|
|
border-radius: 10px;
|
|
z-index: 1;
|
|
opacity: 0.3;
|
|
animation: border-flow 8s linear infinite;
|
|
}
|
|
|
|
.dash-1 {
|
|
width: 150px;
|
|
height: 100px;
|
|
top: 20%;
|
|
right: 10%;
|
|
border-color: rgba(0, 212, 255, 0.4);
|
|
transform: rotate(15deg);
|
|
}
|
|
|
|
.dash-2 {
|
|
width: 120px;
|
|
height: 80px;
|
|
bottom: 18%;
|
|
left: 10%;
|
|
border-color: rgba(236, 72, 153, 0.4);
|
|
transform: rotate(-20deg);
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
@keyframes border-flow {
|
|
0% {
|
|
opacity: 0.2;
|
|
border-color: currentColor;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
border-color: currentColor;
|
|
}
|
|
100% {
|
|
opacity: 0.2;
|
|
border-color: currentColor;
|
|
}
|
|
}
|
|
|
|
/* 菱形装饰 */
|
|
.diamond-deco {
|
|
position: absolute;
|
|
width: 15px;
|
|
height: 15px;
|
|
background: rgba(0, 212, 255, 0.4);
|
|
transform: rotate(45deg);
|
|
z-index: 1;
|
|
box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
|
|
animation: diamond-spin 6s ease-in-out infinite;
|
|
}
|
|
|
|
.diamond-1 {
|
|
top: 32%;
|
|
left: 7%;
|
|
}
|
|
|
|
.diamond-2 {
|
|
top: 58%;
|
|
right: 9%;
|
|
background: rgba(124, 58, 237, 0.4);
|
|
box-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.diamond-3 {
|
|
bottom: 24%;
|
|
left: 20%;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: rgba(16, 185, 129, 0.4);
|
|
box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
@keyframes diamond-spin {
|
|
0%, 100% {
|
|
transform: rotate(45deg) scale(1);
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
transform: rotate(225deg) scale(1.2);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@keyframes rotate-glow {
|
|
0% { transform: rotate(0deg); box-shadow: 0 0 60px rgba(0, 212, 255, 0.4), 0 0 120px rgba(0, 212, 255, 0.2); }
|
|
50% { transform: rotate(180deg); box-shadow: 0 0 80px rgba(0, 212, 255, 0.6), 0 0 160px rgba(0, 212, 255, 0.3); }
|
|
100% { transform: rotate(360deg); box-shadow: 0 0 60px rgba(0, 212, 255, 0.4), 0 0 120px rgba(0, 212, 255, 0.2); }
|
|
}
|
|
|
|
@keyframes rotate-pulse {
|
|
0% { transform: rotate(360deg) scale(1); opacity: 0.2; }
|
|
50% { transform: rotate(180deg) scale(1.1); opacity: 0.3; }
|
|
100% { transform: rotate(0deg) scale(1); opacity: 0.2; }
|
|
}
|
|
|
|
@keyframes float-glow {
|
|
0%, 100% {
|
|
transform: translateY(0) rotate(0deg);
|
|
box-shadow: 0 0 40px rgba(249, 115, 22, 0.6), 0 0 80px rgba(249, 115, 22, 0.3);
|
|
}
|
|
50% {
|
|
transform: translateY(-30px) rotate(180deg);
|
|
box-shadow: 0 0 60px rgba(249, 115, 22, 0.8), 0 0 120px rgba(249, 115, 22, 0.4);
|
|
}
|
|
}
|
|
|
|
@keyframes spin-glow {
|
|
0% { transform: rotate(0deg); opacity: 0.2; }
|
|
50% { transform: rotate(180deg); opacity: 0.35; }
|
|
100% { transform: rotate(360deg); opacity: 0.2; }
|
|
}
|
|
|
|
@keyframes pulse-float {
|
|
0%, 100% {
|
|
transform: translateY(0) scale(1);
|
|
box-shadow: 0 0 55px rgba(236, 72, 153, 0.5), 0 0 110px rgba(236, 72, 153, 0.25);
|
|
}
|
|
50% {
|
|
transform: translateY(-20px) scale(1.08);
|
|
box-shadow: 0 0 75px rgba(236, 72, 153, 0.7), 0 0 150px rgba(236, 72, 153, 0.35);
|
|
}
|
|
}
|
|
|
|
@keyframes float-particle {
|
|
0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
|
|
25% { transform: translateY(-30px) translateX(20px); opacity: 0.8; }
|
|
50% { transform: translateY(-50px) translateX(-10px); opacity: 1; }
|
|
75% { transform: translateY(-30px) translateX(15px); opacity: 0.6; }
|
|
}
|
|
|
|
/* 边缘装饰线条 */
|
|
.edge-line {
|
|
position: absolute;
|
|
background: rgba(0, 212, 255, 0.3);
|
|
z-index: 1;
|
|
box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
|
|
}
|
|
|
|
.edge-line-top {
|
|
top: 50px;
|
|
left: 50px;
|
|
width: 200px;
|
|
height: 2px;
|
|
animation: line-slide-h 4s ease-in-out infinite;
|
|
}
|
|
|
|
.edge-line-bottom {
|
|
bottom: 50px;
|
|
right: 50px;
|
|
width: 200px;
|
|
height: 2px;
|
|
animation: line-slide-h 4s ease-in-out infinite;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.edge-line-left {
|
|
top: 50px;
|
|
left: 50px;
|
|
width: 2px;
|
|
height: 200px;
|
|
background: rgba(124, 58, 237, 0.3);
|
|
animation: line-slide-v 4s ease-in-out infinite;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.edge-line-right {
|
|
bottom: 50px;
|
|
right: 50px;
|
|
width: 2px;
|
|
height: 200px;
|
|
background: rgba(249, 115, 22, 0.3);
|
|
animation: line-slide-v-alt 4s ease-in-out infinite;
|
|
animation-delay: 3s;
|
|
}
|
|
|
|
@keyframes line-slide-h {
|
|
0%, 100% {
|
|
opacity: 0.5;
|
|
width: 200px;
|
|
box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
|
|
background: rgba(0, 212, 255, 0.3);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
width: 280px;
|
|
box-shadow: 0 0 25px rgba(0, 212, 255, 0.8);
|
|
background: rgba(0, 212, 255, 0.5);
|
|
}
|
|
}
|
|
|
|
@keyframes line-slide-v {
|
|
0%, 100% {
|
|
opacity: 0.5;
|
|
height: 200px;
|
|
box-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
|
|
background: rgba(124, 58, 237, 0.3);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
height: 280px;
|
|
box-shadow: 0 0 25px rgba(124, 58, 237, 0.8);
|
|
background: rgba(124, 58, 237, 0.5);
|
|
}
|
|
}
|
|
|
|
@keyframes line-slide-v-alt {
|
|
0%, 100% {
|
|
opacity: 0.5;
|
|
height: 200px;
|
|
box-shadow: 0 0 15px rgba(249, 115, 22, 0.5);
|
|
background: rgba(249, 115, 22, 0.3);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
height: 280px;
|
|
box-shadow: 0 0 25px rgba(249, 115, 22, 0.8);
|
|
background: rgba(249, 115, 22, 0.5);
|
|
}
|
|
}
|
|
|
|
/* 主容器 */
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 80px 60px 60px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* 顶部标题区域 */
|
|
.header {
|
|
margin-bottom: 100px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.header::before,
|
|
.header::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
opacity: 0.15;
|
|
animation: header-orb 5s ease-in-out infinite;
|
|
}
|
|
|
|
.header::before {
|
|
top: -30px;
|
|
left: 10%;
|
|
background: #7c3aed;
|
|
box-shadow: 0 0 60px rgba(124, 58, 237, 0.5);
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.header::after {
|
|
top: -20px;
|
|
right: 10%;
|
|
background: #f97316;
|
|
box-shadow: 0 0 60px rgba(249, 115, 22, 0.5);
|
|
animation-delay: 2.5s;
|
|
}
|
|
|
|
@keyframes header-orb {
|
|
0%, 100% {
|
|
transform: translateY(0) scale(1);
|
|
opacity: 0.15;
|
|
}
|
|
50% {
|
|
transform: translateY(-20px) scale(1.2);
|
|
opacity: 0.25;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-size: 88px;
|
|
font-weight: 900;
|
|
line-height: 1.1;
|
|
color: #ffffff;
|
|
letter-spacing: -2px;
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
display: inline-block;
|
|
text-shadow:
|
|
0 0 40px rgba(0, 212, 255, 0.5),
|
|
0 0 80px rgba(0, 212, 255, 0.3),
|
|
0 5px 15px rgba(0, 0, 0, 0.5);
|
|
animation: title-glow 4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes title-glow {
|
|
0%, 100% {
|
|
text-shadow:
|
|
0 0 40px rgba(0, 212, 255, 0.5),
|
|
0 0 80px rgba(0, 212, 255, 0.3),
|
|
0 5px 15px rgba(0, 0, 0, 0.5);
|
|
}
|
|
50% {
|
|
text-shadow:
|
|
0 0 60px rgba(0, 212, 255, 0.7),
|
|
0 0 120px rgba(0, 212, 255, 0.4),
|
|
0 8px 20px rgba(0, 0, 0, 0.6);
|
|
}
|
|
}
|
|
|
|
.title::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -20px;
|
|
left: -30px;
|
|
width: 80px;
|
|
height: 80px;
|
|
background: #00d4ff;
|
|
opacity: 0.25;
|
|
z-index: -1;
|
|
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
|
animation: shape-pulse 3s ease-in-out infinite;
|
|
box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
|
|
}
|
|
|
|
@keyframes shape-pulse {
|
|
0%, 100% {
|
|
transform: scale(1) rotate(0deg);
|
|
opacity: 0.25;
|
|
box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
|
|
}
|
|
50% {
|
|
transform: scale(1.15) rotate(45deg);
|
|
opacity: 0.4;
|
|
box-shadow: 0 0 50px rgba(0, 212, 255, 0.8);
|
|
}
|
|
}
|
|
|
|
.title::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -15px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: #00d4ff;
|
|
box-shadow:
|
|
0 0 20px rgba(0, 212, 255, 0.8),
|
|
0 0 40px rgba(0, 212, 255, 0.5);
|
|
animation: line-glow 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes line-glow {
|
|
0%, 100% {
|
|
box-shadow:
|
|
0 0 20px rgba(0, 212, 255, 0.8),
|
|
0 0 40px rgba(0, 212, 255, 0.5);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 0 35px rgba(0, 212, 255, 1),
|
|
0 0 70px rgba(0, 212, 255, 0.7);
|
|
}
|
|
}
|
|
|
|
/* 图片区域 */
|
|
.image-section {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
/* 图片周围的光环装饰 */
|
|
.image-section::before,
|
|
.image-section::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
animation: orbit-glow 8s linear infinite;
|
|
}
|
|
|
|
.image-section::before {
|
|
width: 1000px;
|
|
height: 1000px;
|
|
border: 1px solid rgba(0, 212, 255, 0.15);
|
|
box-shadow:
|
|
0 0 40px rgba(0, 212, 255, 0.1),
|
|
inset 0 0 40px rgba(0, 212, 255, 0.05);
|
|
}
|
|
|
|
.image-section::after {
|
|
width: 1100px;
|
|
height: 1100px;
|
|
border: 1px solid rgba(124, 58, 237, 0.1);
|
|
box-shadow:
|
|
0 0 50px rgba(124, 58, 237, 0.08),
|
|
inset 0 0 50px rgba(124, 58, 237, 0.04);
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
@keyframes orbit-glow {
|
|
0%, 100% {
|
|
opacity: 0.3;
|
|
transform: rotate(0deg) scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
transform: rotate(180deg) scale(1.02);
|
|
}
|
|
}
|
|
|
|
.image-container {
|
|
width: 900px;
|
|
height: 900px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #151936;
|
|
border-radius: 30px;
|
|
overflow: hidden;
|
|
border: 2px solid rgba(0, 212, 255, 0.4);
|
|
box-shadow:
|
|
0 0 0 1px rgba(255, 255, 255, 0.1),
|
|
0 30px 60px rgba(0, 0, 0, 0.5),
|
|
0 0 100px rgba(0, 212, 255, 0.3),
|
|
0 0 150px rgba(124, 58, 237, 0.2),
|
|
inset 0 0 50px rgba(0, 212, 255, 0.05);
|
|
animation: image-container-glow 5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes image-container-glow {
|
|
0%, 100% {
|
|
box-shadow:
|
|
0 0 0 1px rgba(255, 255, 255, 0.1),
|
|
0 30px 60px rgba(0, 0, 0, 0.5),
|
|
0 0 100px rgba(0, 212, 255, 0.3),
|
|
0 0 150px rgba(124, 58, 237, 0.2),
|
|
inset 0 0 50px rgba(0, 212, 255, 0.05);
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 0 0 1px rgba(255, 255, 255, 0.15),
|
|
0 35px 70px rgba(0, 0, 0, 0.6),
|
|
0 0 140px rgba(0, 212, 255, 0.5),
|
|
0 0 200px rgba(124, 58, 237, 0.3),
|
|
inset 0 0 60px rgba(0, 212, 255, 0.08);
|
|
transform: scale(1.01);
|
|
}
|
|
}
|
|
|
|
.image-container img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* 图片装饰角标 - 增强动态效果 */
|
|
.image-container::before,
|
|
.image-container::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 3px solid #00d4ff;
|
|
z-index: 10;
|
|
box-shadow:
|
|
0 0 20px rgba(0, 212, 255, 0.6),
|
|
inset 0 0 10px rgba(0, 212, 255, 0.3);
|
|
animation: corner-glow 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes corner-glow {
|
|
0%, 100% {
|
|
border-color: #00d4ff;
|
|
box-shadow:
|
|
0 0 20px rgba(0, 212, 255, 0.6),
|
|
inset 0 0 10px rgba(0, 212, 255, 0.3);
|
|
}
|
|
33% {
|
|
border-color: #7c3aed;
|
|
box-shadow:
|
|
0 0 25px rgba(124, 58, 237, 0.7),
|
|
inset 0 0 12px rgba(124, 58, 237, 0.4);
|
|
}
|
|
66% {
|
|
border-color: #f97316;
|
|
box-shadow:
|
|
0 0 25px rgba(249, 115, 22, 0.7),
|
|
inset 0 0 12px rgba(249, 115, 22, 0.4);
|
|
}
|
|
}
|
|
|
|
.image-container::before {
|
|
top: 20px;
|
|
left: 20px;
|
|
border-right: none;
|
|
border-bottom: none;
|
|
border-radius: 8px 0 0 0;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.image-container::after {
|
|
bottom: 20px;
|
|
right: 20px;
|
|
border-left: none;
|
|
border-top: none;
|
|
border-radius: 0 0 8px 0;
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
/* 内容区域 */
|
|
.content-section {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
|
|
/* 内容区域装饰圆点 */
|
|
.content-section::before,
|
|
.content-section::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
animation: dot-pulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
.content-section::before {
|
|
top: 30%;
|
|
left: 5%;
|
|
background: #00d4ff;
|
|
box-shadow:
|
|
0 0 20px rgba(0, 212, 255, 0.8),
|
|
0 0 40px rgba(0, 212, 255, 0.4);
|
|
}
|
|
|
|
.content-section::after {
|
|
bottom: 30%;
|
|
right: 5%;
|
|
background: #7c3aed;
|
|
box-shadow:
|
|
0 0 20px rgba(124, 58, 237, 0.8),
|
|
0 0 40px rgba(124, 58, 237, 0.4);
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
@keyframes dot-pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
transform: scale(1.5);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.content-text {
|
|
font-size: 46px;
|
|
font-weight: 600;
|
|
line-height: 1.6;
|
|
color: #e2e8f0;
|
|
max-width: 90%;
|
|
position: relative;
|
|
padding: 50px 60px;
|
|
background: rgba(21, 25, 54, 0.85);
|
|
border-radius: 24px;
|
|
border: 1px solid rgba(0, 212, 255, 0.2);
|
|
box-shadow:
|
|
0 20px 40px rgba(0, 0, 0, 0.4),
|
|
0 0 60px rgba(0, 212, 255, 0.15),
|
|
0 0 100px rgba(124, 58, 237, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
|
inset 0 0 30px rgba(0, 212, 255, 0.05);
|
|
backdrop-filter: blur(15px);
|
|
animation: content-glow 6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes content-glow {
|
|
0%, 100% {
|
|
box-shadow:
|
|
0 20px 40px rgba(0, 0, 0, 0.4),
|
|
0 0 60px rgba(0, 212, 255, 0.15),
|
|
0 0 100px rgba(124, 58, 237, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
|
inset 0 0 30px rgba(0, 212, 255, 0.05);
|
|
border-color: rgba(0, 212, 255, 0.2);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.5),
|
|
0 0 80px rgba(0, 212, 255, 0.25),
|
|
0 0 140px rgba(124, 58, 237, 0.15),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
|
inset 0 0 40px rgba(0, 212, 255, 0.08);
|
|
border-color: rgba(124, 58, 237, 0.3);
|
|
}
|
|
}
|
|
|
|
.content-text::before {
|
|
content: '"';
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 30px;
|
|
font-size: 120px;
|
|
color: #00d4ff;
|
|
opacity: 0.25;
|
|
font-family: Georgia, serif;
|
|
line-height: 1;
|
|
text-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
|
|
animation: quote-pulse 4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes quote-pulse {
|
|
0%, 100% {
|
|
opacity: 0.25;
|
|
text-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
|
|
}
|
|
50% {
|
|
opacity: 0.35;
|
|
text-shadow: 0 0 45px rgba(0, 212, 255, 0.8);
|
|
}
|
|
}
|
|
|
|
/* 底部装饰条 */
|
|
.footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px 0 0;
|
|
margin-top: auto;
|
|
gap: 15px;
|
|
}
|
|
|
|
.accent-bar {
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
animation: bar-pulse-glow 3s ease-in-out infinite;
|
|
position: relative;
|
|
}
|
|
|
|
.accent-bar::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
animation: bar-shimmer 2s ease-in-out infinite;
|
|
}
|
|
|
|
.bar-1 {
|
|
width: 120px;
|
|
background: #00d4ff;
|
|
box-shadow:
|
|
0 0 20px rgba(0, 212, 255, 0.6),
|
|
0 0 40px rgba(0, 212, 255, 0.3);
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.bar-1::after {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.bar-2 {
|
|
width: 80px;
|
|
background: #7c3aed;
|
|
box-shadow:
|
|
0 0 20px rgba(124, 58, 237, 0.6),
|
|
0 0 40px rgba(124, 58, 237, 0.3);
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.bar-2::after {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.bar-3 {
|
|
width: 100px;
|
|
background: #f97316;
|
|
box-shadow:
|
|
0 0 20px rgba(249, 115, 22, 0.6),
|
|
0 0 40px rgba(249, 115, 22, 0.3);
|
|
animation-delay: 0.8s;
|
|
}
|
|
|
|
.bar-3::after {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
animation-delay: 0.8s;
|
|
}
|
|
|
|
@keyframes bar-pulse-glow {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
transform: scaleX(1) scaleY(1);
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: scaleX(1.1) scaleY(1.3);
|
|
}
|
|
}
|
|
|
|
@keyframes bar-shimmer {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* 网格线装饰 */
|
|
.grid-overlay {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image:
|
|
linear-align(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
|
linear-align(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
|
background-size: 50px 50px;
|
|
z-index: 0;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* 响应式微调 */
|
|
@media (max-width: 1080px) {
|
|
.container {
|
|
padding: 60px 40px 40px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 72px;
|
|
}
|
|
|
|
.image-container {
|
|
width: 800px;
|
|
height: 800px;
|
|
}
|
|
|
|
.content-text {
|
|
font-size: 38px;
|
|
padding: 40px 50px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 几何装饰背景 - 增强版 -->
|
|
<div class="bg-decoration">
|
|
<!-- 大型几何形状 -->
|
|
<div class="geometric-shape shape-1"></div>
|
|
<div class="geometric-shape shape-2"></div>
|
|
<div class="geometric-shape shape-3"></div>
|
|
<div class="geometric-shape shape-4"></div>
|
|
<div class="geometric-shape shape-5"></div>
|
|
|
|
<!-- 粒子装饰 -->
|
|
<div class="particle particle-1"></div>
|
|
<div class="particle particle-2"></div>
|
|
<div class="particle particle-3"></div>
|
|
<div class="particle particle-4"></div>
|
|
<div class="particle particle-5"></div>
|
|
|
|
<!-- 边缘装饰线条 -->
|
|
<div class="edge-line edge-line-top"></div>
|
|
<div class="edge-line edge-line-bottom"></div>
|
|
<div class="edge-line edge-line-left"></div>
|
|
<div class="edge-line edge-line-right"></div>
|
|
|
|
<!-- 装饰点簇 -->
|
|
<div class="dot-cluster dot-cluster-1">
|
|
<div class="cluster-dot"></div>
|
|
<div class="cluster-dot"></div>
|
|
<div class="cluster-dot"></div>
|
|
</div>
|
|
<div class="dot-cluster dot-cluster-2">
|
|
<div class="cluster-dot"></div>
|
|
<div class="cluster-dot"></div>
|
|
<div class="cluster-dot"></div>
|
|
</div>
|
|
<div class="dot-cluster dot-cluster-3">
|
|
<div class="cluster-dot"></div>
|
|
<div class="cluster-dot"></div>
|
|
<div class="cluster-dot"></div>
|
|
</div>
|
|
<div class="dot-cluster dot-cluster-4">
|
|
<div class="cluster-dot"></div>
|
|
<div class="cluster-dot"></div>
|
|
<div class="cluster-dot"></div>
|
|
</div>
|
|
|
|
<!-- 装饰圆环 -->
|
|
<div class="ring-decoration ring-1"></div>
|
|
<div class="ring-decoration ring-2"></div>
|
|
<div class="ring-decoration ring-3"></div>
|
|
|
|
<!-- 装饰方块 -->
|
|
<div class="square-deco square-1"></div>
|
|
<div class="square-deco square-2"></div>
|
|
<div class="square-deco square-3"></div>
|
|
|
|
<!-- 装饰三角形 -->
|
|
<div class="triangle-deco triangle-1"></div>
|
|
<div class="triangle-deco triangle-2"></div>
|
|
|
|
<!-- 装饰波浪线 -->
|
|
<div class="wave-line wave-1"></div>
|
|
<div class="wave-line wave-2"></div>
|
|
<div class="wave-line wave-3"></div>
|
|
|
|
<!-- 星形装饰 -->
|
|
<div class="star-deco star-1"></div>
|
|
<div class="star-deco star-2"></div>
|
|
<div class="star-deco star-3"></div>
|
|
|
|
<!-- 发光点装饰 -->
|
|
<div class="glow-dot glow-1"></div>
|
|
<div class="glow-dot glow-2"></div>
|
|
<div class="glow-dot glow-3"></div>
|
|
<div class="glow-dot glow-4"></div>
|
|
<div class="glow-dot glow-5"></div>
|
|
|
|
<!-- 十字装饰 -->
|
|
<div class="cross-deco cross-1"></div>
|
|
<div class="cross-deco cross-2"></div>
|
|
|
|
<!-- 弧形装饰线 -->
|
|
<div class="arc-deco arc-1"></div>
|
|
<div class="arc-deco arc-2"></div>
|
|
<div class="arc-deco arc-3"></div>
|
|
|
|
<!-- 微小装饰点 -->
|
|
<div class="micro-dot micro-1"></div>
|
|
<div class="micro-dot micro-2"></div>
|
|
<div class="micro-dot micro-3"></div>
|
|
<div class="micro-dot micro-4"></div>
|
|
<div class="micro-dot micro-5"></div>
|
|
<div class="micro-dot micro-6"></div>
|
|
<div class="micro-dot micro-7"></div>
|
|
<div class="micro-dot micro-8"></div>
|
|
|
|
<!-- 虚线装饰边框 -->
|
|
<div class="dashed-border dash-1"></div>
|
|
<div class="dashed-border dash-2"></div>
|
|
|
|
<!-- 菱形装饰 -->
|
|
<div class="diamond-deco diamond-1"></div>
|
|
<div class="diamond-deco diamond-2"></div>
|
|
<div class="diamond-deco diamond-3"></div>
|
|
</div>
|
|
|
|
<!-- 主要内容容器 -->
|
|
<div class="container">
|
|
<!-- 标题区域 -->
|
|
<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="content-section">
|
|
<div class="content-text">{{text}}</div>
|
|
</div>
|
|
|
|
<!-- 底部装饰条 -->
|
|
<div class="footer">
|
|
<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> |