打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

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

MediaWiki界面页面
 
(未显示同一用户的8个中间版本)
第4行: 第4行:
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电音横幅 - 最终版</title>
<title>混沌霓虹海报</title>
<style>
<style>
     /* 定义跑马灯光效动画 */
     /* --- 动画定义 --- */
     @keyframes marquee-shine {
     @keyframes neon-glow-text {
         0% {
        0%, 100% { text-shadow: 0 0 5px #ff00de, 0 0 10px #ff00de, 0 0 20px #ff00de, 0 0 40px #ff00de, 0 0 60px #c700ff; }
            background-position: -200% 0;
        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;
         }
         }
         100% {
         50% {
             background-position: 200% 0;
             transform: scale(1.5); /* 在动画中途放大 */
            color: #ffdd00;      /* 变为更亮的颜色 */
            text-shadow: 0 0 25px #ffdd00, 0 0 40px #ff0000; /* 发出更强的光芒 */
         }
         }
     }
     }
    /* --- 主要样式修改 --- */


     .electro-banner-container {
     .electro-banner-container {
         --banner-height: auto;
         --banner-height: auto;
         min-height: 300px;
         min-height: 300px; width: 100%;
        width: 100%;
         font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
         font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
         color: white;
         color: white; display: flex; flex-direction: column;  
        display: flex;
         justify-content: center; align-items: center;
        flex-direction: column;  
         position: relative; overflow: hidden;
         justify-content: center;
         padding: 40px 20px;
        align-items: center;
         background-size: 400% 400%;
         position: relative;
         background-image: linear-gradient(120deg, #000000 0%, #3d034a 25%, #ff0000 50%, #8A2387 75%, #000000 100%);
        overflow: hidden;
        animation: flow-neon-background 20s ease-in-out infinite;
         padding: 20px;
         box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
         padding-bottom: 25px;
         border: 1px solid #ff0055;
         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;
         box-sizing: border-box;
     }
     }


     .electro-banner-container .center-content {
    /* 关键修改(1): 将背景光晕恢复为蓝/绿的混沌配色 */
         text-align: center;
     .electro-banner-container::before, .electro-banner-container::after {
         width: 100%;
         content: ''; position: absolute;
         border-radius: 50%; filter: blur(80px); z-index: 0;
     }
     }
 
    /* 左侧光点改为亮绿色 */
     .electro-banner-container .title-combo {
     .electro-banner-container::before {
         font-weight: 900;
         width: 300px; height: 300px; top: 40%; left: 15%;
         line-height: 1.2;
         transform: translate(-50%, -50%);
        background: rgba(57, 255, 20, 0.4);
        animation: breathe-fade 7s infinite ease-in-out;
     }
     }
 
    /* 右侧光点改为亮蓝色 */
     .electro-banner-container .title-main-banner {
     .electro-banner-container::after {
         font-size: clamp(28px, 5vw, 48px);
         width: 400px; height: 400px; top: 50%; right: 5%;
         color: #ffdd00;
         transform: translate(0, -50%);
         text-shadow:  
         background: rgba(0, 229, 255, 0.5);
            0 0 3px #fff, 0 0 8px #ff0000, 0 0 15px #ff0000, 0 0 25px #ff5a00;
        animation: breathe-fade 9s infinite ease-in-out -2s;
     }
     }


     .electro-banner-container .title-sub-banner {
     .electro-banner-container > * {
        font-size: clamp(32px, 6vw, 60px);
         position: relative; z-index: 1;
        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;
     }
     }
    /* ... (其他未变动的样式保持原样) ... */
    .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): 全新的按钮样式 */
     .marquee-button {
     .animated-text-button {
         display: inline-block;
         display: flex; /* 使用flex布局来排列文字 */
         text-decoration: none;
         text-decoration: none;
         margin-top: 25px;
         margin-top: 25px;
         padding: 12px 30px;
         padding: 12px 20px;
         border: 2px solid #00e5ff;
         border: 2px solid #00e5ff;
         border-radius: 50px;
         border-radius: 50px;
        color: #ffffff;
         font-size: 22px; /* 稍微增大字体以增强效果 */
         font-size: 18px;
         font-weight: bold;
         font-weight: bold;
         text-transform: uppercase;
         text-transform: uppercase;
        background-color: transparent;
         transition: all 0.3s ease;
         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;
     }
     }
 
    .animated-text-button span {
    /* 跑马灯按钮的悬停效果 (提供额外反馈) */
        display: inline-block;
    .marquee-button:hover {
        margin: 0 4px; /* 让字与字之间有一点空隙 */
         box-shadow: 0 0 25px #00e5ff, 0 0 5px #fff inset;
        /* 应用动画,并使用CSS变量来错开每个字的动画时间 */
         transform: scale(1.03); /* 轻微放大 */
        animation: animate-letter 2.5s infinite;
         animation-delay: calc(0.12s * var(--i));
         transition: all 0.3s ease;
     }
     }
 
     .animated-text-button:hover {
     .electro-banner-container .sponsor-banner {
         box-shadow: 0 0 25px #00e5ff;
        padding-top: 20px;
         background-color: rgba(0, 229, 255, 0.1);
        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 {
     .animated-text-button:hover span {
        text-decoration: none;
         animation-play-state: paused;
        margin-top: 20px;
         color: #ffdd00;
    }
         transform: scale(1.1);
   
         text-shadow: 0 0 15px #ffdd00;
     /* -- 关闭按钮 -- */
     .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 {
    .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; }
        background-color: rgba(255, 255, 255, 0.3);
     .cn-closeButton-wrapper { text-decoration: none; margin-top: 20px; }
        box-shadow: 0 0 10px #ff00ff;
    .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>
</style>
</head>
</head>
第164行: 第131行:
     <div class="center-content">
     <div class="center-content">
         <div class="title-combo">
         <div class="title-combo">
             <span class="title-main-banner">红色电音</span>
             <span class="title-main-banner">红色电棍</span>
             <span class="title-sub-banner">极地大冲击</span>
             <span class="title-sub-banner">轮椅大冲寄</span>
         </div>
         </div>
         <div class="date-line">
         <div class="date-line">
第176行: 第143行:
     </div>
     </div>


     <!-- 跑马灯按钮 -->
     <!-- 关键修改(3): 更新按钮的HTML结构以支持逐字动画 -->
     <a href="https://example.com" class="marquee-button" target="_blank">
     <a href="https://live.bilibili.com/27161867" class="animated-text-button" target="_blank">
         加入大冲击
         <span style="--i:1;">加</span>
        <span style="--i:2;">入</span>
        <span style="--i:3;">大</span>
        <span style="--i:4;">冲</span>
        <span style="--i:5;">击</span>
     </a>
     </a>


第185行: 第156行:
     </div>
     </div>


    <!-- 更小的关闭按钮 -->
     <a href="#" class="cn-closeButton-wrapper" title="拒绝大冲击" onclick="mw.centralNotice.hideBanner();return false;">
     <a href="#" title="拒绝大冲击" onclick="mw.centralNotice.hideBanner();return false;"><div class="cn-closeButton cn-closeButton-wrapper">天地人间 完全绝缘</div></a>
        <div class="my-custom-close-button">天地人间 完全绝缘</div>
    </a>
 
</div>
</div>
</body>
</body>
</html>
</html>

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>

           红色电棍
           轮椅大冲寄
       来势汹汹的TRANCE电音激爆网络神秘地带
加上风靡多年的霹雳舞,将你推向舞海极地
不用麻醉,一样情不自禁 HI 起来,飞起来!
   <a href="https://live.bilibili.com/27161867" class="animated-text-button" target="_blank">
       
       
       
       
       
   </a>
   <a href="#" class="cn-closeButton-wrapper" title="拒绝大冲击" onclick="mw.centralNotice.hideBanner();return false;">
天地人间 完全绝缘
   </a>

</body> </html>