醉巷 版式
2023年5月1日
修订 50
评分
13
↑ 22
↓ 9
支持率
71%
总票数 31
Wilson 95% 下界
53.4%
在相同票数下更稳健的支持率估计
争议指数
0.824
评分趋势
按周聚合 加载图表中...
最近修订
1 / 17
unknown
6 个月前
您已成功地重新命名本页: "theme:golden-wind" 至 "theme:drunken-alley".
unknown
6 个月前
SOURCE_CHANGED
6 个月前
最近投票
1 / 4
2025-05-26
2025-03-04
2025-02-27
2025-01-31
2025-01-04
2024-09-03
2024-09-03
2024-09-03
2024-09-03
2024-09-03
相关页面
暂无推荐
页面源码
[[module CSS]]
@import url("https://scp-wiki-cn.wdfiles.com/local--code/theme:drunken-alley/1");
[[/module]]
[[iftags +版式]]
[[>]]
[[module Rate]]
[[/>]]
[[tabview]]
[[tab 这是什么]]
**[[size 200%]]· 这是什么？**[[/size]]
[[=]]
> 这是[[*user Dr Roger_F_XL]]所制作的**美学版式**，与任何设定无挂钩。
[[/=]]
[[/tab]]
[[tab 如何使用]]
**[[size 200%]]· 如何使用？**[[/size]]
[[=]]
> 请在你的页面开头加上以下内容：
> **[[include :scp-wiki-cn:theme:golden-wind]]**
> [[<]]
> [[div class="content-panel centered standalone"]]
> [[/div]]
> [[include :scp-wiki-cn:theme:drunken-alley]]
> @@[[>]]@@
> [[module rate]]
> @@[[/>]]@@
>
> 项目编号：SCP-CN-XXXX
> ......
> [[div class="content-panel centered standalone"]]
> [[/div]]
> [[/<]]
[[/=]]
[[/tab]]
[[tab 代码]]
**[[size 200%]]· 代码**[[/size]]
[[code type="css"]]
/* HEADER */
div#header {
background: url(http://scp-wiki-cloud.wdfiles.com/local--files/roger/drunk-logo) 10px 40px no-repeat;
background-size: 100px 93px;
}
div#container-wrap {
background-image: url();
}
/* 赛博朋克核心配色 */
:root {
--neon-green: #39FF14;
--neon-pink: #FF10F0;
--cyber-black: #000B1A;
}
/* 基础重置 */
body {
background: var(--cyber-black);
color: #E0E0E0;
font-family: 'Courier New', monospace;
}
/* 动态网格背景 */
body::before {
content: "";
position: fixed;
z-index: -1;
width: 100vw;
height: 100vh;
background:
linear-gradient(transparent 95%, rgba(57, 255, 20, 0.1)),
repeating-linear-gradient(
45deg,
rgba(57, 255, 20, 0.1) 0px,
rgba(57, 255, 20, 0.1) 2px,
transparent 2px,
transparent 4px
);
animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
from { background-position: 0 0; }
to { background-position: 40px 40px; }
}
/* 镭射标题效果 */
h1, #page-title {
color: var(--neon-green);
text-shadow:
0 0 15px var(--neon-green),
0 0 30px rgba(57, 255, 20, 0.5);
font-family: 'Impact', 'Arial Black', sans-serif;
letter-spacing: 2px;
position: relative;
padding: 10px;
background: linear-gradient(90deg,
transparent,
rgba(57, 255, 20, 0.2) 50%,
transparent);
}
/* 霓虹边框组件 */
.cyber-border {
position: relative;
border: 2px solid var(--neon-green);
box-shadow: 0 0 20px var(--neon-green);
padding: 20px;
margin: 15px 0;
background: rgba(0, 11, 26, 0.9);
}
.cyber-border::before {
content: "";
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border: 2px solid var(--neon-pink);
filter: blur(5px);
z-index: -1;
}
/* 动态链接系统 */
a {
color: var(--neon-pink);
text-decoration: none;
position: relative;
transition: 0.3s;
}
a:hover {
color: var(--neon-green);
text-shadow: 0 0 10px var(--neon-green);
}
a::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--neon-pink);
transition: 0.3s;
}
a:hover::after {
width: 100%;
background: var(--neon-green);
}
/* 脉冲按钮 */
button, input[type="submit"] {
background: var(--cyber-black);
border: 2px solid var(--neon-green);
color: var(--neon-green);
padding: 10px 25px;
cursor: pointer;
transition: 0.3s;
position: relative;
overflow: hidden;
}
button:hover, input[type="submit"]:hover {
background: rgba(57, 255, 20, 0.1);
box-shadow: 0 0 30px var(--neon-green);
}
/* CODE */
.code {
border: 5px solid #000;
padding: 0 1em;
color: #000;
background-image: url("");
background-color: #fff;
position: relative;
overflow: hidden;
box-shadow: 0 0 20px #00f7ff,
inset 0 0 20px #00f7ff,
inset -2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
animation: borderDash 2s infinite;
}
@keyframes borderDash {
0%, 100% {
border-style: solid;
}
50% {
border-style: dashed;
}
}
/* TAB */
div.yui-navset ul.yui-nav {
display: flex;
gap: 0;
background: linear-gradient(135deg, #ff0, #ffd700);
border-radius: 0;
padding: 1px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
div.yui-navset ul.yui-nav a,
div.yui-navset div.yui-navset-top ul.yui-nav a {
background: linear-gradient(135deg, rgba(255, 255, 0, 0.8), rgba(255, 215, 0, 0.8));
color: #9c27b0 !important;
border: 3px solid #ff0;
transition: all 0.5s ease;
border-radius: 0;
padding: 1px 4px;
cursor: pointer;
position: relative;
font-size: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
animation: borderDash 2s infinite;
text-shadow: 0 0 10px #9c27b0, 0 0 20px #9c27b0, 0 0 30px #9c27b0;
font-weight: bold;
}
@keyframes borderDash {
0%, 100% {
border-style: solid;
border-width: 3px;
transform: translateY(-5px);
}
50% {
border-style: double;
border-width: 6px;
transform: translateY(0px);
}
}
@keyframes neonGlow {
0% {
box-shadow: 0 0 10px #ff0, 0 0 20px #ff0, 0 0 30px #ff0;
}
100% {
box-shadow: 0 0 20px #ffd700, 0 0 30px #ffd700, 0 0 40px #ffd700;
}
}
/* 鼠标悬停效果 */
div.yui-navset ul.yui-nav a:hover,
div.yui-navset div.yui-navset-top ul.yui-nav a:hover {
background: linear-gradient(135deg, #ffd700, #ff0);
transform: translateY(-5px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
border: 3px solid #ff0;
animation: neonGlow 2s infinite;
color: #9c27b0 !important;
text-shadow: 0 0 10px #9c27b0, 0 0 20px #9c27b0, 0 0 30px #9c27b0;
}
/* 选中状态效果 */
div.yui-navset ul.yui-nav .selected a,
div.yui-navset ul.yui-nav .selected a:focus,
div.yui-navset ul.yui-nav .selected a:hover {
background: linear-gradient(135deg, #ff0, #ffd700);
color: #9c27b0 !important;
border: 3px solid #ff0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
animation: borderDash 2s infinite;
text-shadow: 0 0 10px #9c27b0, 0 0 20px #9c27b0, 0 0 30px #9c27b0;
font-weight: bold;
}
/* 确保主要文本内容颜色为紫色 */
div.yui-navset .yui-content {
color: #9c27b0 !important;
}
/* 评分模块 - 全息投影风格 */
.page-rate-widget-box {
background: rgba(0, 11, 26, 0.9) !important;
border: 2px solid #39FF14 !important;
box-shadow:
0 0 20px #39FF14,
inset 0 0 15px #FF10F0 !important;
transform-style: preserve-3d;
position: relative;
overflow: hidden;
transition: 0.3s all;
}
/* 动态全息边框 */
.page-rate-widget-box::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: repeating-linear-gradient(
45deg,
#39FF14 0%,
#FF10F0 50%,
#39FF14 100%
);
z-index: -1;
animation: hologramBorder 3s linear infinite;
}
@keyframes hologramBorder {
0% { filter: hue-rotate(0deg); opacity: 1; }
50% { opacity: 0.7; }
100% { filter: hue-rotate(360deg); opacity: 1; }
}
/* 投票按钮 */
.rateup, .ratedown {
background: linear-gradient(45deg,
#000B1A 0%,
rgba(57, 255, 20, 0.3) 100%
) !important;
border: 1px solid #39FF14 !important;
transition: 0.3s all !important;
}
.rateup:hover, .ratedown:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px #39FF14 !important;
}
/* 分数显示 */
.rate-points {
font-family: 'Digital-7', monospace !important;
color: #FF10F0 !important;
text-shadow: 0 0 10px #FF10F0 !important;
background:
repeating-linear-gradient(
90deg,
rgba(255,16,240,0.1) 0px,
rgba(255,16,240,0.1) 2px,
transparent 2px,
transparent 4px
) !important;
letter-spacing: 2px !important;
position: relative;
}
/* 动态分数背景 */
.rate-points::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(57, 255, 20, 0.1),
transparent
);
animation: scoreGlow 2s infinite;
}
@keyframes scoreGlow {
0% { opacity: 0; left: -100%; }
50% { opacity: 0.5; }
100% { opacity: 0; left: 100%; }
}
/* 取消按钮特效 */
.cancel a {
color: #39FF14 !important;
text-shadow: 0 0 5px #39FF14 !important;
position: relative;
}
.cancel a:hover {
color: #FF10F0 !important;
animation: cancelSpark 0.5s;
}
@keyframes cancelSpark {
0% { text-shadow: 0 0 10px #FF10F0; }
50% { transform: scale(1.2); }
100% { text-shadow: none; }
}
/* 悬浮整体特效 */
.page-rate-widget-box:hover {
transform:
rotateX(5deg)
rotateY(5deg)
translateZ(20px);
box-shadow:
0 0 30px #39FF14,
inset 0 0 25px #FF10F0,
0 10px 40px rgba(0,0,0,0.5) !important;
}
/* 点击粒子特效 */
@keyframes particleBurst {
0% { opacity: 1; transform: scale(0); }
100% { opacity: 0; transform: scale(3); }
}
.rateup:active::after,
.ratedown:active::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle, #39FF14 20%, transparent 70%);
animation: particleBurst 0.5s ease-out;
}
/* BLOCKQUOTE */
blockquote, div.blockquote {
border: 6px double transparent; /* 透明边框 */
padding: 0 1em;
color: #fff; /* 白色文本 */
text-shadow: 0 0 0 #000, /* 黑色描边 */
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
background: linear-gradient(45deg, #FF007F, #00FFD7, #FF007F); /* 荧光粉色和绿色渐变 */
background-size: 300% 300%;
animation: gradientFlow 5s ease infinite; /* 渐变流动动画 */
box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.1), /* 内阴影 */
0 0 30px rgba(255, 0, 127, 0.3), /* 荧光粉色外发光 */
0 0 30px rgba(0, 255, 215, 0.3); /* 荧光绿色外发光 */
transition: all 0.3s ease;
}
blockquote:hover, div.blockquote:hover {
transform: scale(1.02);
box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.1),
0 0 40px rgba(255, 0, 127, 0.5), /* 悬停时增强粉色发光 */
0 0 40px rgba(0, 255, 215, 0.5); /* 悬停时增强绿色发光 */
}
/* 渐变流动动画 */
@keyframes gradientFlow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 全局霓虹动画定义 */
@keyframes neon-glow {
0% {
box-shadow: 0 0 5px #ff007f, 0 0 10px #ff007f, 0 0 15px #ff007f;
}
33% {
box-shadow: 0 0 5px #ffff00, 0 0 10px #ffff00, 0 0 15px #ffff00;
}
66% {
box-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff;
}
100% {
box-shadow: 0 0 5px #ff007f, 0 0 10px #ff007f, 0 0 15px #ff007f;
}
}
/* 全局霓虹动画定义 */
@keyframes neon-glow-red {
0% {
box-shadow: 0 0 5px #ff007f, 0 0 10px #ff007f, 0 0 15px #ff007f;
}
100% {
box-shadow: 0 0 20px #ff007f, 0 0 35px #ff007f, 0 0 50px #ff007f;
}
}
@keyframes neon-glow-yellow {
0% {
box-shadow: 0 0 5px #ffff00, 0 0 10px #ffff00, 0 0 15px #ffff00;
}
100% {
box-shadow: 0 0 20px #ffff00, 0 0 35px #ffff00, 0 0 50px #ffff00;
}
}
@keyframes neon-glow-blue {
0% {
box-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff;
}
100% {
box-shadow: 0 0 20px #00ffff, 0 0 35px #00ffff, 0 0 50px #00ffff;
}
}
/* 侧边栏整体样式 */
#side-bar {
background: #000; /* 纯黑色主体 */
border-radius: 15px;
padding: 20px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
/* 侧边栏标题样式 */
#side-bar .heading {
color: #fff;
font-size: 12pt;
font-weight: bold;
margin-bottom: 15px;
padding: 10px;
border-radius: 10px;
background: #ff007f88; /* 荧光红作为点缀，带透明度 */
box-shadow: 0 0 15px rgba(255, 0, 127, 0.5); /* 荧光红作为阴影 */
}
/* 侧边栏链接样式 */
#side-bar .menu-item {
color: #fff;
padding: 10px;
margin: 5px 0;
border-radius: 8px;
transition: all 0.3s ease;
background: #1a1a1a; /* 深灰色打底 */
border-left: 4px solid #ff007f; /* 荧光红作为点缀 */
}
#side-bar .menu-item:hover {
background: #2d2d2d; /* 悬停时背景稍亮 */
transform: translateX(5px);
}
#side-bar .menu-item:nth-child(3n+1) { /* 第一种颜色 */
border-left: 4px solid #ff007f; /* 荧光红作为点缀 */
}
#side-bar .menu-item:nth-child(3n+2) { /* 第二种颜色 */
border-left: 4px solid #ffff00; /* 荧光黄作为点缀 */
}
#side-bar .menu-item:nth-child(3n+3) { /* 第三种颜色 */
border-left: 4px solid #00ffff; /* 荧光蓝作为点缀 */
}
/* 搜索栏样式 */
#search-top-box-form {
position: relative;
}
#search-top-box-form input[type="text"] {
width: 160px; /* 调整为更小的宽度 */
padding: 8px; /* 减小内边距 */
border-radius: 25px;
border: none;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 12pt;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}
#search-top-box-form input[type="submit"] {
padding: 8px 15px; /* 调整为更小的尺寸 */
border-radius: 25px;
border: none;
background: linear-gradient(45deg, #ff007f, #ffff00, #00ffff);
color: #fff;
font-size: 12pt;
cursor: pointer;
box-shadow: 0 0 15px #ff007f,
0 0 30px #ffff00,
0 0 45px #00ffff;
animation: neon-glow 3s infinite;
}
#search-top-box-form input[type="submit"]:hover {
transform: scale(1.05);
box-shadow: 0 0 20px #ff007f,
0 0 40px #ffff00,
0 0 60px #00ffff;
}
[[/code]]
[[/tab]]
[[/tabview]]
[[/iftags]]