Votelectric
都是ai写的,类要用base,不然会把全站都改了。
头像:
.base {
border-radius: 50% !important;
overflow: hidden;
border: 3px solid #00FFFF; /* 青色霓虹边框 */
/* 初始光晕(将在动画中改变)*/
box-shadow: 0 0 10px #FF00FF,
0 0 20px #00FFFF;
/* 应用霓虹闪烁动画 */
animation: neon-flicker 1.5s infinite alternate; /* 1.5秒一次,循环,交替方向 */
/* 滤镜和过渡 */
filter: saturate(1.5) contrast(1.1);
transition: all 0.2s ease-in-out;
}
.base img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease-in-out;
}
.base:hover {
/* 悬停时停止霓虹闪烁,并应用更强的悬停光晕 */
animation: none;
box-shadow: 0 0 15px #FF00FF,
0 0 25px #00FFFF,
0 0 35px #FF00FF;
}
.base:hover img {
/* 悬停时轻微缩放 */
transform: scale(1.05);
/* 应用故障效果和动画:使用 'datamosh' 模拟像素跳动和色彩分离 */
filter: url(#datamosh); /* 引用 SVG 滤镜(如果论坛支持) */
animation: glitch-flicker 0.1s steps(2, end) infinite; /* 极快速、不连续的闪烁 */
}
/* 霓虹边框闪烁动画 */
@keyframes neon-flicker {
0%, 100% {
/* 亮:初始光晕 */
box-shadow: 0 0 10px #FF00FF, 0 0 20px #00FFFF;
}
50% {
/* 暗:光晕减弱,模拟电源不稳定 */
box-shadow: 0 0 5px #FF00FF50, 0 0 8px #00FFFF50;
}
52% {
/* 突然完全熄灭 (更逼真的闪烁) */
box-shadow: none;
}
}
/* 故障闪烁动画 (只在悬停时生效) */
@keyframes glitch-flicker {
0% {
filter: hue-rotate(0deg) saturate(1.5) contrast(1.1); /* 正常色彩 */
}
33% {
filter: hue-rotate(30deg) sepia(0.5) contrast(1.2); /* 偏色和故障感 */
transform: translate(1px, -1px);
}
66% {
filter: hue-rotate(-30deg) sepia(0.2) contrast(1.1); /* 偏色和故障感 */
transform: translate(-1px, 1px);
opacity: 0.9;
}
100% {
filter: hue-rotate(0deg) saturate(1.5) contrast(1.1);
}
}
昵称:
.base {
/* **流光渐变背景(核心)** */
background: linear-gradient(
90deg,
#00FFFF, /* 青色 */
#FF00FF, /* 品红 */
#00FFFF, /* 青色 */
#FFD700, /* 金色 */
#00FFFF /* 青色 */
);
/* 扩大背景尺寸,以便动画时有空间滚动 */
background-size: 400% auto; /* 增大到400%以获得更长的流动距离 */
/* **裁剪文本** */
-webkit-background-clip: text; /* Chrome/Safari */
background-clip: text;
color: transparent !important; /* 使文本透明,显示后面的背景 */
/* **字体和霓虹光晕** */
font-family: 'Consolas', 'Courier New', monospace; /* 科技感字体 */
font-weight: bold;
letter-spacing: 1px;
/* **更亮的霓虹光晕** */
text-shadow: 0 0 7px #FF00FF, /* 品红光晕 */
0 0 12px #00FFFF, /* 青色光晕 */
0 0 20px rgba(255, 255, 0, 0.4); /* 增加黄色光晕,提升亮度 */
/* **应用动画** */
animation: neon-text-flow 5s linear infinite; /* 将动画时间增加到3秒,看起来更平滑 */
}
/* 悬停效果:增加光晕强度 */
.base:hover {
text-shadow: 0 0 10px #FF00FF,
0 0 20px #00FFFF,
0 0 30px rgba(255, 255, 0, 0.6);
}
.base::after {
content: " >\_";
color: #FF00FF; /* 品红符号 */
font-size: 0.8em;
margin-left: 5px;
/* 确保符号也有光晕效果 */
text-shadow: 0 0 3px #00FFFF;
}
/* 流动动画 */
@keyframes neon-text-flow {
to {
background-position: -400% center; /* 匹配 background-size,实现无缝循环 */
}
}
帖:
.base {
border-left: none !important;
/* 基础样式 */
border-radius: 6px !important;
line-height: 1.6;
color: #E0FFFF !important; /* 亮青色内容文本 */
/* **动态霓虹背景(核心)** */
background: linear-gradient(
90deg,
#1A0033, /* 深紫黑(主色调) */
#001A33, /* 深青蓝 */
#330033, /* 深品红 */
#1A0033 /* 回到主色调 */
);
/* 扩大背景尺寸并使其循环流动 */
background-size: 300% auto;
animation: post-neon-flow 5s linear infinite; /* 5秒循环一次,平滑流动 */
/* 确保背景深色为主,内容清晰可见 */
background-color: #0d0d1a !important; /* 深度背景保障 */
/* 盒子阴影:在帖子外部添加微弱的霓虹光晕 */
box-shadow: 0 0 5px rgba(0, 255, 255, 0.2),
0 0 10px rgba(255, 0, 255, 0.2);
transition: all 0.5s ease;
}
/* 引用块的样式:保持深色霓虹风格,但使用静态背景以区分 */
.base blockquote {
/* 引用块的样式 */
border-left: 3px solid #FF00FF !important; /* 内部引用块使用品红强调线 */
background-color: #1A0033 !important; /* 深紫黑色背景 */
color: #FFCCCC !important;
padding: 10px !important; /* 修正过大的 padding 值 */
margin: 15px 0;
border-radius: 4px;
}
/* 帖子背景流动动画 */
@keyframes post-neon-flow {
to {
background-position: -300% center; /* 匹配 background-size,实现流动效果 */
}
}