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

2025年7月14日 (一) 10:24的版本

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

           红色电音
           极地大冲击

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

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

   <a href="https://example.com" class="marquee-button" target="_blank">
       加入大冲击
   </a>

       本次活动由OTTOWiki独家承办

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

天地人间完全绝缘

   </a>

</body> </html>