从下面两个大佬的帖子继续讨论 @keron @Clarke.L
油猴脚本：始皇充电特效同款 - 开发调优 - LINUX DO
充电特效PLUS ~ 船新版本 - 开发调优 - LINUX DO
看了下 @keron 佬的充电特效和五彩斑斓特效油猴脚本没有整合，所以整合了一下css样式，然后新添加了资料卡片充电特效.
使用方法改成自己的用户名，然后丢在linuxdo增强插件自定义样式里面，参考图片
代码样式：
/* 第一个特效：个人资料头像特效 */
:root {
--ld-border-radius: 10%;
--ld-color: #00aeff;
}
/* 应用于 elfmaid 用户头像 */
img.avatar[src *= "/elfmaid/"] {
border-radius: var(--ld-border-radius);
position: relative;
z-index: 1;
}
/* elfmaid 用户头像的充电特效 */
.post-avatar {
position: relative;
overflow: visible;
&:has(img.avatar[src *= "/elfmaid/"]) {
position: relative;
&::after {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
content: "";
display: block;
border-radius: var(--ld-border-radius);
pointer-events: none;
box-shadow: 0 0 20px var(--ld-color);
animation: elfmaidAni 3s ease-in-out infinite;
z-index: 0;
}
}
}
/* 多彩动画关键帧 */
@keyframes elfmaidAni {
0% ,100% {
opacity: 0.5;
transform: scale(0.95);
filter: hue-rotate(0deg);
}
50% {
opacity: 1.0;
transform: scale(1.00);
filter: hue-rotate(200deg);
}
}
/* 第二个特效：回复评论头像特效 */
.rewind-notification {
--avatar-height: 48px;
}
#toggle-current-user::after {
width: 48px;
height: 48px;
position: absolute;
left: -4px;
top: -4px;
content: "";
background-image: url("/plugins/discourse-rewind/images/rewind-avatar-2-shimmer.gif");
display: block;
background-size: cover;
border-radius: var(--ld-border-radius);
}
.rewind-avatar img.avatar[src^="/user_avatar/linux.do/elfmaid/"],
.rewind-avatar img.avatar[src^="https://linux.do/user_avatar/linux.do/elfmaid/"] {
width: auto;
height: var(--avatar-height);
position: relative !important;
border-radius: 10% !important;
box-shadow: 0 0 20px #ffd700 !important;
animation: rewindPulse 3s ease-in-out infinite !important;
}
@keyframes rewindPulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.drop-down-mode .d-header-icons .active .icon:after {
border-top: 0px solid var(--darkreader-border--secondary);
}
/* 用户卡片头像特效 */
.user-card-avatar img.avatar[src *= "/elfmaid/"] {
border-radius: var(--ld-border-radius);
}
.user-card-avatar {
&:has(img.avatar[src *= "/elfmaid/"])::after {
width: 128px;
height: 128px;
position: absolute;
left: 0;
top: 0;
content: "";
display: block;
border-radius: var(--ld-border-radius);
pointer-events: none;
box-shadow: 0 0 20px var(--ld-color);
animation: elfmaidAni 3s ease-in-out infinite;
}
}
效果图如下，因为是静态截图可能有点体现不出来
1、个人资料五彩斑斓动态特效
2、回复评论头像充电特效
3、点击回复评论的头像卡片特效
