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

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

MediaWiki界面页面
琪露若
琪露若留言 | 贡献 (已保护“MediaWiki:Centralnotice-template-RedTrance”:​被 CentralNotice 自动保护,请编者仅通过 Special:CentralNoticeSpecial:Translate 进行编辑。​([编辑=仅允许中央通告管理员](无限期)​[移动=仅允许中央通告管理员](无限期))​[连锁保护])
 
(未显示同一用户的10个中间版本)
第1行: 第1行:
<!-- Empty banner -->
<!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>
 
<div class="electro-banner-container">
   
    <div class="center-content">
        <div class="title-combo">
            <span class="title-main-banner">红色电棍</span>
            <span class="title-sub-banner">轮椅大冲寄</span>
        </div>
        <div class="date-line">
            只要你敢触电——<br>7月14日, 15日<br>天地人间完全放电
        </div>
    </div>
   
    <div class="promo-line">
        来势汹汹的<strong>TRANCE电音</strong>激爆网络神秘地带<br>加上风靡多年的霹雳舞,将你推向舞海极地<br>不用麻醉,一样情不自禁 HI 起来,飞起来!
    </div>
 
    <!-- 关键修改(3): 更新按钮的HTML结构以支持逐字动画 -->
    <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>
 
    <div class="sponsor-banner">
        本次活动由OTTOWiki独家承办
    </div>
 
    <a href="#" class="cn-closeButton-wrapper" title="拒绝大冲击" onclick="mw.centralNotice.hideBanner();return false;">
        <div class="my-custom-close-button">天地人间 完全绝缘</div>
    </a>
 
</div>
</body>
</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>