MediaWiki:Centralnotice-template-RedTrance：修订间差异
MediaWiki界面页面
更多操作
| 第177行： | 第177行： | ||
<!-- 跑马灯按钮 --> | <!-- 跑马灯按钮 --> | ||
<a href="https:// | <a href="https://live.bilibili.com/27161867" class="marquee-button" target="_blank"> | ||
加入大冲击 | 加入大冲击 | ||
</a> | </a> | ||
2025年7月14日 (一) 10:29的版本
<!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 marquee-shine {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.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: 20px;
padding-bottom: 25px;
background:
radial-gradient(circle at 15% 50%, rgba(131, 255, 126, 0.3) 0%, rgba(131, 255, 126, 0) 30%),
radial-gradient(circle at 85% 50%, rgba(255, 0, 255, 0.4) 0%, rgba(255, 0, 255, 0) 30%),
linear-gradient(180deg, #0d012c 0%, #3d034a 70%, #000000 100%);
box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
border: 1px solid #fff;
box-sizing: border-box;
}
.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: red;
}
/* -- 跑马灯按钮样式 -- */
.marquee-button {
display: inline-block;
text-decoration: none;
margin-top: 25px;
padding: 12px 30px;
border: 2px solid #00e5ff;
border-radius: 50px;
color: #ffffff;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
background-color: transparent;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
/* 关键修改 (1): 将动画应用到基础样式并设为无限循环 */
background-image: linear-gradient(100deg,
transparent 20%,
rgba(255, 255, 255, 0.7) 50%,
transparent 80%
);
background-size: 200% 100%;
/* 动画名称 时长 速度曲线 循环次数 */
animation: marquee-shine 2.5s linear infinite;
}
/* 跑马灯按钮的悬停效果 (提供额外反馈) */
.marquee-button:hover {
box-shadow: 0 0 25px #00e5ff, 0 0 5px #fff inset;
transform: scale(1.03); /* 轻微放大 */
}
.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;
}
/* -- 关闭按钮 -- */
.cn-closeButton {
/* 关键修改 (2): 减小内边距和字体大小 */
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;
}
.cn-closeButton:hover {
background-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 0 10px #ff00ff;
}
</style> </head> <body>
</body> </html>