MediaWiki:Centralnotice-template-RedTrance：修订间差异

2025年7月15日 (二) 11:12的最新版本

<!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>

           红色电棍
           轮椅大冲寄

           只要你敢触电——
7月14日, 15日
天地人间完全放电

       来势汹汹的TRANCE电音激爆网络神秘地带
加上风靡多年的霹雳舞，将你推向舞海极地
不用麻醉，一样情不自禁 HI 起来，飞起来！

   <a href="https://live.bilibili.com/27161867" class="animated-text-button" target="_blank">
       加
       入
       大
       冲
       击
   </a>

       本次活动由OTTOWiki独家承办

   <a href="#" class="cn-closeButton-wrapper" title="拒绝大冲击" onclick="mw.centralNotice.hideBanner();return false;">

天地人间完全绝缘

   </a>

</body> </html>