root/LLZQ-XCX
1
0
Fork 0
generated from root/feiqiu-ETL
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c972c52e04439fc4ff282db13fbdd3587ec3ca1a
LLZQ-XCX/Prototype/css/banner.css

274 lines
9.5 KiB
CSS
Raw Blame History

/**
* 通用Banner背景样式
* 使用方式：
* 1. 引入此CSS文件
* 2. 在banner容器上添加 class="banner-bg"
* 3. 添加主题类名定义颜色，如 class="banner-bg theme-blue"
*
* 可用主题：
* - theme-blue (默认蓝色)
* - theme-blue-light (浅蓝色)
* - theme-red (红色-高优先)
* - theme-orange (橙色-优先)
* - theme-pink (粉色-关系)
* - theme-green (绿色)
* - theme-purple (紫色)
*/
/* ===== 主题颜色变量定义 ===== */
:root {
/* 蓝色主题 (默认) */
--banner-color-start: #1e6fff;
--banner-color-mid: #3d8bff;
--banner-color-end: #5ba3ff;
/* 纹理透明度 */
--texture-opacity: 0.08;
}
/* ===== 基础Banner样式 ===== */
.banner-bg {
position: relative;
background:
/* 1. 底部边缘高光 */
linear-gradient(0deg, rgba(255,255,255,0.15) 0%, transparent 25%),
/* 2. 右下角光晕 */
radial-gradient(ellipse 60% 45% at 85% 95%, rgba(255,255,255,0.25) 0%, transparent 55%),
/* 3. 左侧柔和光晕 */
radial-gradient(ellipse 50% 80% at 5% 40%, rgba(255,255,255,0.12) 0%, transparent 50%),
/* 4. 顶部深色加深 */
linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 40%),
/* 5. 左上角深色区域 */
radial-gradient(ellipse 80% 70% at -10% -5%, rgba(0,0,0,0.25) 0%, transparent 45%),
/* 6. 斜向丝绸光带 */
linear-gradient(315deg,
transparent 0%,
rgba(255,255,255,0.04) 20%,
rgba(255,255,255,0.12) 45%,
rgba(255,255,255,0.12) 55%,
rgba(255,255,255,0.04) 80%,
transparent 100%
),
/* 7. 主渐变 - 多色过渡（翻转） */
linear-gradient(330deg,
var(--banner-color-start) 0%,
var(--banner-color-start) 15%,
var(--banner-color-mid) 40%,
var(--banner-color-mid) 60%,
var(--banner-color-end) 85%,
var(--banner-color-end) 100%
);
overflow: hidden;
}
/* ===== 纹理层 - 几何线条 ===== */
.banner-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: var(--texture-opacity);
background-image:
/* 斜线网格 */
repeating-linear-gradient(
45deg,
transparent,
transparent 20px,
rgba(255,255,255,0.5) 20px,
rgba(255,255,255,0.5) 21px
),
repeating-linear-gradient(
-45deg,
transparent,
transparent 20px,
rgba(255,255,255,0.3) 20px,
rgba(255,255,255,0.3) 21px
);
pointer-events: none;
z-index: 1;
}
/* ===== 纹理层 - 右上角柔和光晕 ===== */
.banner-bg::after {
content: '';
position: absolute;
top: -110px;
right: -130px;
width: 300px;
height: 280px;
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 65%);
pointer-events: none;
z-index: 1;
}
/* 确保内容在纹理之上 */
.banner-bg > * {
position: relative;
z-index: 2;
}
/* ===== 主题颜色预设 ===== */
/* 蓝色主题 (默认) - 深蓝色 */
.banner-bg.theme-blue,
.banner-bg {
--banner-color-start: #002d80;
--banner-color-mid: #0052d9;
--banner-color-end: #2b7de9;
}
/* 浅蓝色主题 */
.banner-bg.theme-blue-light {
--banner-color-start: #1a6dd9;
--banner-color-mid: #4087e9;
--banner-color-end: #6ba8f8;
}
/* 红色主题 - 高优先召回 */
.banner-bg.theme-red {
--banner-color-start: #991b1b;
--banner-color-mid: #dc2626;
--banner-color-end: #ef4444;
}
/* 橙色主题 - 优先召回 */
.banner-bg.theme-orange {
--banner-color-start: #9a3412;
--banner-color-mid: #ea580c;
--banner-color-end: #f97316;
}
/* 粉色主题 - 关系构建 */
.banner-bg.theme-pink {
--banner-color-start: #9d174d;
--banner-color-mid: #db2777;
--banner-color-end: #ec4899;
}
/* 绿色主题 */
.banner-bg.theme-green {
--banner-color-start: #00796b;
--banner-color-mid: #00a870;
--banner-color-end: #4cd964;
}
/* 紫色主题 */
.banner-bg.theme-purple {
--banner-color-start: #7b1fa2;
--banner-color-mid: #9c27b0;
--banner-color-end: #ba68c8;
}
/* 青绿色主题 - 客户回访 */
.banner-bg.theme-teal {
--banner-color-start: #0f766e;
--banner-color-mid: #14b8a6;
--banner-color-end: #2dd4bf;
}
/* 黑金主题 - 客户详情 */
.banner-bg.theme-dark-gold {
--banner-color-start: #1a1a1a;
--banner-color-mid: #2a2520;
--banner-color-end: #1f1c18;
--texture-opacity: 0.06;
}
.banner-bg.theme-dark-gold::after {
bottom: 0px;
right: 0px;
width: 500px;
height: 500px;
background:
radial-gradient(ellipse at 60% 70%, rgba(255, 196, 0, 0.25) 0%, transparent 50%),
linear-gradient(135deg, transparent 0%, rgba(255, 187, 0, 0.15) 30%, rgba(255, 183, 0, 0.2) 60%, transparent 100%);
}
/* 珊瑚粉主题 - 助教详情 */
.banner-bg.theme-coral {
--banner-color-start: #be4a62;
--banner-color-mid: #d4617a;
--banner-color-end: #e8899a;
}
/* ===== 纹理变体 ===== */
/* 艺术波浪纹理 */
.banner-bg.texture-artistic::before {
background-image:
/* 全局柔和渐变 */
linear-gradient(120deg,
rgba(255,255,255,0.15) 0%,
transparent 40%,
rgba(255,255,255,0.05) 70%,
rgba(255,255,255,0.12) 100%
),
/* 多层流动曲线 */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M-20 80 Q30 40 80 80 T180 80 T280 80' fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1.5'/%3E%3Cpath d='M-20 120 Q40 160 100 120 T220 120' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3Cpath d='M-20 160 Q50 130 110 160 T240 160' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E");
background-size: 100% 100%, 200px 150px;
opacity: 1;
}
/* 丝绸流线纹理 */
.banner-bg.texture-silk::before {
background-image:
/* 丝绸光泽渐变 */
linear-gradient(135deg,
rgba(255,255,255,0.18) 0%,
transparent 25%,
rgba(255,255,255,0.06) 50%,
transparent 75%,
rgba(255,255,255,0.1) 100%
),
/* 优雅的贝塞尔曲线 */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Cpath d='M0 100 C50 50, 100 150, 150 100 S250 50, 300 100' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='2'/%3E%3Cpath d='M0 140 C60 90, 120 190, 180 140 S280 90, 340 140' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1.5'/%3E%3Cpath d='M0 60 C40 30, 90 90, 140 60 S220 30, 280 60' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3C/svg%3E");
background-size: 100% 100%, 280px 180px;
opacity: 1;
}
/* Windows 11 Bloom 风格 - 流动丝带效果 */
.banner-bg.texture-aurora::before {
background-image:
/* 流动丝带 SVG */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='ribbon1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='rgba(255,255,255,0.4)'/%3E%3Cstop offset='50%25' stop-color='rgba(255,255,255,0.15)'/%3E%3Cstop offset='100%25' stop-color='rgba(255,255,255,0.3)'/%3E%3C/linearGradient%3E%3ClinearGradient id='ribbon2' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='rgba(0,0,0,0.15)'/%3E%3Cstop offset='50%25' stop-color='rgba(255,255,255,0.2)'/%3E%3Cstop offset='100%25' stop-color='rgba(0,0,0,0.1)'/%3E%3C/linearGradient%3E%3ClinearGradient id='ribbon3' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='rgba(255,255,255,0)'/%3E%3Cstop offset='30%25' stop-color='rgba(255,255,255,0.35)'/%3E%3Cstop offset='70%25' stop-color='rgba(255,255,255,0.35)'/%3E%3Cstop offset='100%25' stop-color='rgba(255,255,255,0)'/%3E%3C/linearGradient%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3C!-- 底层丝带 --%3E%3Cpath d='M-50 180 Q80 100 180 140 T350 100 T500 140' fill='none' stroke='url(%23ribbon2)' stroke-width='60' stroke-linecap='round' filter='url(%23blur)'/%3E%3C!-- 中层丝带 --%3E%3Cpath d='M-30 50 Q100 120 200 70 T380 110 T520 60' fill='none' stroke='url(%23ribbon1)' stroke-width='45' stroke-linecap='round'/%3E%3C!-- 顶层高光丝带 --%3E%3Cpath d='M0 120 Q120 60 220 100 T420 70' fill='none' stroke='url(%23ribbon3)' stroke-width='25' stroke-linecap='round'/%3E%3C!-- 光影细节 --%3E%3Cpath d='M50 90 Q150 150 280 90 T450 120' fill='none' stroke='rgba(255,255,255,0.25)' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
background-size: 480px 160px;
background-position: center 40px;
background-repeat: no-repeat;
opacity: 0.5;
}
/* 流线纹理 */
.banner-bg.texture-flow::before {
background-image:
repeating-linear-gradient(
120deg,
transparent,
transparent 40px,
rgba(255,255,255,0.08) 40px,
rgba(255,255,255,0.08) 80px
);
opacity: 1;
}
/* 简约纹理 - 只有光晕无线条 */
.banner-bg.texture-minimal::before {
background: none;
}
/* ===== 动画效果（可选） ===== */
.banner-bg.animated::before {
animation: texture-shift 20s linear infinite;
}
@keyframes texture-shift {
0% {
background-position: 0 0, 0 0;
}
100% {
background-position: 40px 40px, -40px -40px;
}
}
Reference in New Issue View Git Blame Copy Permalink