MediaWiki:Centralnotice-template-RedTrance
MediaWiki界面页面
更多操作
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>混沌霓虹海报</title> <style>
/* --- 动画定义 --- */
@keyframes neon-glow-text {
0%, 100% { text-shadow: 0 0 5px #ff00de, 0 0 10px #ff00de, 0 0 20px #ff00de, 0 0 40px #ff00de, 0 0 60px #c700ff; }
50% { text-shadow: 0 0 10px #ff59f9, 0 0 20px #ff59f9, 0 0 30px #ff59f9, 0 0 50px #ff59f9, 0 0 80px #e059ff; }
}
@keyframes flow-neon-background {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes breathe-fade {
0% { opacity: 0.2; transform: scale(0.95); }
50% { opacity: 0.8; transform: scale(1.05); }
100% { opacity: 0.2; transform: scale(0.95); }
}
/* 关键修改(2): 为按钮文字设计的全新“逐字激活”动画 */
@keyframes animate-letter {
0%, 100% {
transform: scale(1.0);
color: #00e5ff;
text-shadow: 0 0 10px #00e5ff;
}
50% {
transform: scale(1.5); /* 在动画中途放大 */
color: #ffdd00; /* 变为更亮的颜色 */
text-shadow: 0 0 25px #ffdd00, 0 0 40px #ff0000; /* 发出更强的光芒 */
}
}
/* --- 主要样式修改 --- */
.electro-banner-container {
--banner-height: auto;
min-height: 300px; width: 100%;
font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
color: white; display: flex; flex-direction: column;
justify-content: center; align-items: center;
position: relative; overflow: hidden;
padding: 40px 20px;
background-size: 400% 400%;
background-image: linear-gradient(120deg, #000000 0%, #3d034a 25%, #ff0000 50%, #8A2387 75%, #000000 100%);
animation: flow-neon-background 20s ease-in-out infinite;
box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
border: 1px solid #ff0055;
box-sizing: border-box;
}
/* 关键修改(1): 将背景光晕恢复为蓝/绿的混沌配色 */
.electro-banner-container::before, .electro-banner-container::after {
content: ; position: absolute;
border-radius: 50%; filter: blur(80px); z-index: 0;
}
/* 左侧光点改为亮绿色 */
.electro-banner-container::before {
width: 300px; height: 300px; top: 40%; left: 15%;
transform: translate(-50%, -50%);
background: rgba(57, 255, 20, 0.4);
animation: breathe-fade 7s infinite ease-in-out;
}
/* 右侧光点改为亮蓝色 */
.electro-banner-container::after {
width: 400px; height: 400px; top: 50%; right: 5%;
transform: translate(0, -50%);
background: rgba(0, 229, 255, 0.5);
animation: breathe-fade 9s infinite ease-in-out -2s;
}
.electro-banner-container > * {
position: relative; z-index: 1;
}
/* ... (其他未变动的样式保持原样) ... */
.electro-banner-container .center-content { text-align: center; width: 100%; }
.electro-banner-container .title-combo { font-weight: 900; line-height: 1.2; }
.electro-banner-container .title-main-banner { font-size: clamp(28px, 5vw, 48px); color: #ffdd00; text-shadow: 0 0 3px #fff, 0 0 8px #ff0000, 0 0 15px #ff0000, 0 0 25px #ff5a00; }
.electro-banner-container .title-sub-banner { font-size: clamp(32px, 6vw, 60px); color: #00e5ff; -webkit-text-stroke: 2px #ffffff; text-shadow: 0 0 8px #00e5ff, 0 0 15px #00e5ff; }
.electro-banner-container .date-line { font-size: clamp(12px, 2vw, 16px); color: #39ff14; text-shadow: 0 0 8px #39ff14; margin-top: 16px; }
.electro-banner-container .promo-line { font-size: clamp(14px, 2.5vw, 18px); color: #ffff00; margin-top: 20px; padding-top: 12px; text-shadow: 1px 1px 2px black; text-align: center; line-height: 1.6; width: 100%; border-top: 1px solid rgba(255, 255, 0, 0.3); }
.promo-line strong { font-weight: bold; font-size: 24px; color: #fff; animation: neon-glow-text 1s infinite ease-in-out; }
/* 关键修改(2): 全新的按钮样式 */
.animated-text-button {
display: flex; /* 使用flex布局来排列文字 */
text-decoration: none;
margin-top: 25px;
padding: 12px 20px;
border: 2px solid #00e5ff;
border-radius: 50px;
font-size: 22px; /* 稍微增大字体以增强效果 */
font-weight: bold;
text-transform: uppercase;
transition: all 0.3s ease;
}
.animated-text-button span {
display: inline-block;
margin: 0 4px; /* 让字与字之间有一点空隙 */
/* 应用动画，并使用CSS变量来错开每个字的动画时间 */
animation: animate-letter 2.5s infinite;
animation-delay: calc(0.12s * var(--i));
transition: all 0.3s ease;
}
.animated-text-button:hover {
box-shadow: 0 0 25px #00e5ff;
background-color: rgba(0, 229, 255, 0.1);
}
/* 鼠标悬停时，暂停单个字的动画，让所有字一起发光 */
.animated-text-button:hover span {
animation-play-state: paused;
color: #ffdd00;
transform: scale(1.1);
text-shadow: 0 0 15px #ffdd00;
}
.electro-banner-container .sponsor-banner { padding-top: 20px; width: 100%; text-align: center; font-size: 12px; font-weight: bold; color: rgba(255, 255, 255, 0.7); text-shadow: 1px 1px 2px #000; }
.cn-closeButton-wrapper { text-decoration: none; margin-top: 20px; }
.my-custom-close-button { padding: 4px 9px; font-size: 11px; color: #fff; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 20px; cursor: pointer; transition: all 0.3s ease; text-shadow: 0 0 5px #ff00ff; }
.my-custom-close-button:hover { background-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 10px #ff00ff; }
</style> </head> <body>
</body> </html>