让自己的头像看起来炫酷diao炸天的油猴脚本
- 内容介绍
- 文章标签
- 相关推荐
由于本人喜欢金光闪闪炫酷吊炸天的视觉效果，所以让GPT写了一个油猴脚本更改了自己的头像视觉效果。该脚本仅本地生效。
效果如下
image733×374 99.9 KB
image370×215 13.6 KB
仅对配置用户生效
// 这里的用户名改为自己的自己就炫酷
const TARGET_USERNAME = "toao";
源码如下
// ==UserScript==
// @name Linux.do Self Avatar Glow
// @namespace http://tampermonkey.net/
// @version 0.2.0
// @description 只给自己的头像和昵称加上更炫的展示效果
// @author Claude
// @match https://linux.do/*
// @grant none
// ==/UserScript==
(function () {
"use strict";
const TARGET_USERNAME = "toao";
const STYLE_ID = "tm-self-avatar-glow-style";
const AVATAR_CLASS = "tm-self-avatar-glow";
const NAME_CLASS = "tm-self-name-glow";
const FULLNAME_CLASS = "tm-self-fullname-glow";
const BADGE_CLASS = "tm-self-badge-glow";
const PROCESSED_ATTR = "data-self-glow-processed";
const AVATAR_NODE_SELECTOR = "img.avatar, .avatar";
const AVATAR_ANCHOR_SELECTORS = [
"a.main-avatar",
".topic-avatar a",
".post-avatar a",
".user-card-avatar a",
"a[data-user-card]",
].join(",");
const CONTAINER_SELECTORS = [
".topic-post",
".topic-avatar",
".topic-meta-data",
".names",
".poster",
".user-card",
".user-card-content",
".user-main",
".user-summary",
"article",
].join(",");
const NAME_SELECTORS = [
".topic-meta-data .names .username",
".topic-meta-data .names .full-name",
".names .username",
".names .full-name",
".poster-info .username",
".poster-info .full-name",
".user-profile-names .username",
".user-profile-names .full-name",
".user-card-content .username",
".user-card-content .full-name",
].join(",");
function normalizeUsername(value) {
return (value || "").trim().replace(/^@/, "").toLowerCase();
}
function isAvatarAnchor(anchor) {
if (!(anchor instanceof HTMLAnchorElement)) {
return false;
}
if (anchor.matches(AVATAR_ANCHOR_SELECTORS)) {
return true;
}
return !!anchor.querySelector(AVATAR_NODE_SELECTOR);
}
function isTargetUserAnchor(anchor) {
if (!(anchor instanceof HTMLAnchorElement) || !isAvatarAnchor(anchor)) {
return false;
}
const userCard = normalizeUsername(anchor.dataset.userCard);
const hrefMatch = anchor.getAttribute("href")?.match(/\/u\/([^/?#]+)/i);
const hrefUser = normalizeUsername(hrefMatch?.[1]);
const aria = normalizeUsername(anchor.getAttribute("aria-label")?.split(" ")[0]);
const target = normalizeUsername(TARGET_USERNAME);
return userCard === target || hrefUser === target || aria === target;
}
function ensureStyles() {
if (document.getElementById(STYLE_ID)) {
return;
}
const style = document.createElement("style");
style.id = STYLE_ID;
style.textContent = `
.${AVATAR_CLASS} {
position: relative !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-radius: 999px;
isolation: isolate;
transform: translateZ(0);
animation: tm-self-avatar-bounce 2.2s ease-in-out infinite;
filter: drop-shadow(0 0 14px rgba(255, 0, 153, 0.5));
}
.${AVATAR_CLASS}::before {
content: "";
position: absolute;
inset: -6px;
border-radius: inherit;
background: conic-gradient(
from 0deg,
#ff2d95,
#7c3aed,
#00e5ff,
#ffe600,
#ff6a00,
#ff2d95
);
animation: tm-self-avatar-spin 1.9s linear infinite;
filter: blur(1px) saturate(1.25);
box-shadow:
0 0 16px rgba(255, 45, 149, 0.65),
0 0 28px rgba(124, 58, 237, 0.45),
0 0 40px rgba(0, 229, 255, 0.3);
z-index: -2;
}
.${AVATAR_CLASS}::after {
content: "";
position: absolute;
inset: -16px;
border-radius: inherit;
background: radial-gradient(circle, rgba(255, 230, 0, 0.38), rgba(255, 45, 149, 0.22) 35%, rgba(0, 229, 255, 0.14) 58%, transparent 75%);
z-index: -3;
pointer-events: none;
animation: tm-self-avatar-pulse 1.1s ease-in-out infinite;
}
.${AVATAR_CLASS} img.avatar,
.${AVATAR_CLASS} .avatar {
position: relative;
z-index: 1;
border-radius: 999px;
border: 3px solid rgba(255, 255, 255, 0.98);
box-shadow:
0 0 0 4px rgba(30, 41, 59, 0.72),
0 0 12px rgba(255, 255, 255, 0.85),
0 0 26px rgba(255, 45, 149, 0.72),
0 0 42px rgba(0, 229, 255, 0.42);
transform: scale(1.08);
}
.${BADGE_CLASS} {
position: absolute;
top: -3px;
right: -3px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(6px) saturate(1.35);
-webkit-backdrop-filter: blur(6px) saturate(1.35);
color: #fff6bf;
font-size: 10px;
font-weight: 900;
line-height: 1;
text-shadow:
0 0 6px rgba(255, 230, 0, 0.75),
0 0 12px rgba(255, 45, 149, 0.35);
box-shadow:
inset 0 0 10px rgba(255, 255, 255, 0.08),
0 0 8px rgba(255, 255, 255, 0.16),
0 0 14px rgba(255, 45, 149, 0.26);
animation: tm-self-badge-flash 1.3s ease-in-out infinite;
pointer-events: none;
}
.${NAME_CLASS},
.${FULLNAME_CLASS} {
position: relative;
display: inline-block;
font-weight: 900 !important;
letter-spacing: 0.05em;
text-shadow:
0 0 8px rgba(255, 255, 255, 0.25),
0 0 16px rgba(255, 45, 149, 0.45),
0 0 24px rgba(0, 229, 255, 0.25);
}
.${NAME_CLASS} {
padding: 0 0.18em;
background: linear-gradient(90deg, #ffe600 0%, #ff2d95 20%, #00e5ff 48%, #7c3aed 70%, #ffe600 100%);
background-size: 240% auto;
color: transparent !important;
-webkit-background-clip: text;
background-clip: text;
animation: tm-self-name-shine 1.8s linear infinite;
filter: saturate(1.2);
}
.${NAME_CLASS}::before {
content: "【至尊】";
margin-right: 0.25em;
color: #ffe600;
text-shadow:
0 0 6px rgba(255, 230, 0, 0.9),
0 0 14px rgba(255, 45, 149, 0.45);
}
.${NAME_CLASS}::after {
content: " ✦✦✦";
color: #ffe600;
font-size: 0.85em;
text-shadow:
0 0 8px rgba(255, 230, 0, 0.9),
0 0 16px rgba(255, 45, 149, 0.45);
animation: tm-self-stars-blink 0.8s steps(2, end) infinite;
}
.${FULLNAME_CLASS} {
color: #ffffff !important;
background: linear-gradient(90deg, rgba(255, 45, 149, 0.18), rgba(0, 229, 255, 0.18));
padding: 0 0.28em;
border-radius: 999px;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.16),
0 0 12px rgba(124, 58, 237, 0.18);
}
.${FULLNAME_CLASS}::before {
content: "◈ 夜店之王 ◈ ";
color: #ff9cf5;
text-shadow:
0 0 8px rgba(255, 45, 149, 0.8),
0 0 16px rgba(124, 58, 237, 0.38);
}
@keyframes tm-self-avatar-spin {
to {
transform: rotate(360deg);
}
}
@keyframes tm-self-avatar-pulse {
0%,
100% {
transform: scale(0.92);
opacity: 0.66;
}
50% {
transform: scale(1.15);
opacity: 1;
}
}
@keyframes tm-self-avatar-bounce {
0%,
100% {
transform: translateY(0) scale(1);
}
25% {
transform: translateY(-1px) scale(1.02) rotate(-1deg);
}
50% {
transform: translateY(-2px) scale(1.04) rotate(1deg);
}
75% {
transform: translateY(-1px) scale(1.02) rotate(-1deg);
}
}
@keyframes tm-self-name-shine {
to {
background-position: 240% center;
}
}
@keyframes tm-self-stars-blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
@keyframes tm-self-badge-flash {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.12);
opacity: 0.82;
}
}
`;
document.head.appendChild(style);
}
function ensureBadge(anchor) {
if (anchor.querySelector(`:scope > .${BADGE_CLASS}`)) {
return;
}
const badge = document.createElement("span");
badge.className = BADGE_CLASS;
badge.textContent = "✦";
anchor.appendChild(badge);
}
function markAvatar(anchor) {
if (anchor.getAttribute(PROCESSED_ATTR) === "1") {
return;
}
anchor.classList.add(AVATAR_CLASS);
anchor.setAttribute(PROCESSED_ATTR, "1");
ensureBadge(anchor);
}
function isTargetNameNode(node) {
if (!(node instanceof HTMLElement)) {
return false;
}
const text = normalizeUsername(node.textContent);
return text === normalizeUsername(TARGET_USERNAME);
}
function markNames(container) {
const names = container.querySelectorAll(NAME_SELECTORS);
names.forEach((node) => {
if (!(node instanceof HTMLElement) || !isTargetNameNode(node)) {
return;
}
if (node.classList.contains("username")) {
node.classList.add(NAME_CLASS);
}
if (node.classList.contains("full-name")) {
node.classList.add(FULLNAME_CLASS);
}
});
}
function processTargetAnchor(anchor) {
if (!isTargetUserAnchor(anchor)) {
return;
}
markAvatar(anchor);
const container = anchor.closest(CONTAINER_SELECTORS) || anchor.parentElement;
if (container instanceof HTMLElement) {
markNames(container);
}
}
function scan(root = document) {
if (!(root instanceof Document || root instanceof Element)) {
return;
}
if (root instanceof HTMLAnchorElement) {
processTargetAnchor(root);
}
root
.querySelectorAll(AVATAR_ANCHOR_SELECTORS)
.forEach((anchor) => processTargetAnchor(anchor));
}
ensureStyles();
scan();
new MutationObserver((mutations) => {
for (const mutation of mutations) {
mutation.addedNodes.forEach((node) => {
if (node instanceof Element) {
scan(node);
}
});
}
}).observe(document.body, { childList: true, subtree: true });
})();
网友解答：
--【壹】--：
由于本人喜欢金光闪闪炫酷吊炸天的视觉效果，所以让GPT写了一个油猴脚本更改了自己的头像视觉效果。该脚本仅本地生效。
效果如下
image733×374 99.9 KB
image370×215 13.6 KB
仅对配置用户生效
// 这里的用户名改为自己的自己就炫酷
const TARGET_USERNAME = "toao";
源码如下
// ==UserScript==
// @name Linux.do Self Avatar Glow
// @namespace http://tampermonkey.net/
// @version 0.2.0
// @description 只给自己的头像和昵称加上更炫的展示效果
// @author Claude
// @match https://linux.do/*
// @grant none
// ==/UserScript==
(function () {
"use strict";
const TARGET_USERNAME = "toao";
const STYLE_ID = "tm-self-avatar-glow-style";
const AVATAR_CLASS = "tm-self-avatar-glow";
const NAME_CLASS = "tm-self-name-glow";
const FULLNAME_CLASS = "tm-self-fullname-glow";
const BADGE_CLASS = "tm-self-badge-glow";
const PROCESSED_ATTR = "data-self-glow-processed";
const AVATAR_NODE_SELECTOR = "img.avatar, .avatar";
const AVATAR_ANCHOR_SELECTORS = [
"a.main-avatar",
".topic-avatar a",
".post-avatar a",
".user-card-avatar a",
"a[data-user-card]",
].join(",");
const CONTAINER_SELECTORS = [
".topic-post",
".topic-avatar",
".topic-meta-data",
".names",
".poster",
".user-card",
".user-card-content",
".user-main",
".user-summary",
"article",
].join(",");
const NAME_SELECTORS = [
".topic-meta-data .names .username",
".topic-meta-data .names .full-name",
".names .username",
".names .full-name",
".poster-info .username",
".poster-info .full-name",
".user-profile-names .username",
".user-profile-names .full-name",
".user-card-content .username",
".user-card-content .full-name",
].join(",");
function normalizeUsername(value) {
return (value || "").trim().replace(/^@/, "").toLowerCase();
}
function isAvatarAnchor(anchor) {
if (!(anchor instanceof HTMLAnchorElement)) {
return false;
}
if (anchor.matches(AVATAR_ANCHOR_SELECTORS)) {
return true;
}
return !!anchor.querySelector(AVATAR_NODE_SELECTOR);
}
function isTargetUserAnchor(anchor) {
if (!(anchor instanceof HTMLAnchorElement) || !isAvatarAnchor(anchor)) {
return false;
}
const userCard = normalizeUsername(anchor.dataset.userCard);
const hrefMatch = anchor.getAttribute("href")?.match(/\/u\/([^/?#]+)/i);
const hrefUser = normalizeUsername(hrefMatch?.[1]);
const aria = normalizeUsername(anchor.getAttribute("aria-label")?.split(" ")[0]);
const target = normalizeUsername(TARGET_USERNAME);
return userCard === target || hrefUser === target || aria === target;
}
function ensureStyles() {
if (document.getElementById(STYLE_ID)) {
return;
}
const style = document.createElement("style");
style.id = STYLE_ID;
style.textContent = `
.${AVATAR_CLASS} {
position: relative !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-radius: 999px;
isolation: isolate;
transform: translateZ(0);
animation: tm-self-avatar-bounce 2.2s ease-in-out infinite;
filter: drop-shadow(0 0 14px rgba(255, 0, 153, 0.5));
}
.${AVATAR_CLASS}::before {
content: "";
position: absolute;
inset: -6px;
border-radius: inherit;
background: conic-gradient(
from 0deg,
#ff2d95,
#7c3aed,
#00e5ff,
#ffe600,
#ff6a00,
#ff2d95
);
animation: tm-self-avatar-spin 1.9s linear infinite;
filter: blur(1px) saturate(1.25);
box-shadow:
0 0 16px rgba(255, 45, 149, 0.65),
0 0 28px rgba(124, 58, 237, 0.45),
0 0 40px rgba(0, 229, 255, 0.3);
z-index: -2;
}
.${AVATAR_CLASS}::after {
content: "";
position: absolute;
inset: -16px;
border-radius: inherit;
background: radial-gradient(circle, rgba(255, 230, 0, 0.38), rgba(255, 45, 149, 0.22) 35%, rgba(0, 229, 255, 0.14) 58%, transparent 75%);
z-index: -3;
pointer-events: none;
animation: tm-self-avatar-pulse 1.1s ease-in-out infinite;
}
.${AVATAR_CLASS} img.avatar,
.${AVATAR_CLASS} .avatar {
position: relative;
z-index: 1;
border-radius: 999px;
border: 3px solid rgba(255, 255, 255, 0.98);
box-shadow:
0 0 0 4px rgba(30, 41, 59, 0.72),
0 0 12px rgba(255, 255, 255, 0.85),
0 0 26px rgba(255, 45, 149, 0.72),
0 0 42px rgba(0, 229, 255, 0.42);
transform: scale(1.08);
}
.${BADGE_CLASS} {
position: absolute;
top: -3px;
right: -3px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(6px) saturate(1.35);
-webkit-backdrop-filter: blur(6px) saturate(1.35);
color: #fff6bf;
font-size: 10px;
font-weight: 900;
line-height: 1;
text-shadow:
0 0 6px rgba(255, 230, 0, 0.75),
0 0 12px rgba(255, 45, 149, 0.35);
box-shadow:
inset 0 0 10px rgba(255, 255, 255, 0.08),
0 0 8px rgba(255, 255, 255, 0.16),
0 0 14px rgba(255, 45, 149, 0.26);
animation: tm-self-badge-flash 1.3s ease-in-out infinite;
pointer-events: none;
}
.${NAME_CLASS},
.${FULLNAME_CLASS} {
position: relative;
display: inline-block;
font-weight: 900 !important;
letter-spacing: 0.05em;
text-shadow:
0 0 8px rgba(255, 255, 255, 0.25),
0 0 16px rgba(255, 45, 149, 0.45),
0 0 24px rgba(0, 229, 255, 0.25);
}
.${NAME_CLASS} {
padding: 0 0.18em;
background: linear-gradient(90deg, #ffe600 0%, #ff2d95 20%, #00e5ff 48%, #7c3aed 70%, #ffe600 100%);
background-size: 240% auto;
color: transparent !important;
-webkit-background-clip: text;
background-clip: text;
animation: tm-self-name-shine 1.8s linear infinite;
filter: saturate(1.2);
}
.${NAME_CLASS}::before {
content: "【至尊】";
margin-right: 0.25em;
color: #ffe600;
text-shadow:
0 0 6px rgba(255, 230, 0, 0.9),
0 0 14px rgba(255, 45, 149, 0.45);
}
.${NAME_CLASS}::after {
content: " ✦✦✦";
color: #ffe600;
font-size: 0.85em;
text-shadow:
0 0 8px rgba(255, 230, 0, 0.9),
0 0 16px rgba(255, 45, 149, 0.45);
animation: tm-self-stars-blink 0.8s steps(2, end) infinite;
}
.${FULLNAME_CLASS} {
color: #ffffff !important;
background: linear-gradient(90deg, rgba(255, 45, 149, 0.18), rgba(0, 229, 255, 0.18));
padding: 0 0.28em;
border-radius: 999px;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.16),
0 0 12px rgba(124, 58, 237, 0.18);
}
.${FULLNAME_CLASS}::before {
content: "◈ 夜店之王 ◈ ";
color: #ff9cf5;
text-shadow:
0 0 8px rgba(255, 45, 149, 0.8),
0 0 16px rgba(124, 58, 237, 0.38);
}
@keyframes tm-self-avatar-spin {
to {
transform: rotate(360deg);
}
}
@keyframes tm-self-avatar-pulse {
0%,
100% {
transform: scale(0.92);
opacity: 0.66;
}
50% {
transform: scale(1.15);
opacity: 1;
}
}
@keyframes tm-self-avatar-bounce {
0%,
100% {
transform: translateY(0) scale(1);
}
25% {
transform: translateY(-1px) scale(1.02) rotate(-1deg);
}
50% {
transform: translateY(-2px) scale(1.04) rotate(1deg);
}
75% {
transform: translateY(-1px) scale(1.02) rotate(-1deg);
}
}
@keyframes tm-self-name-shine {
to {
background-position: 240% center;
}
}
@keyframes tm-self-stars-blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
@keyframes tm-self-badge-flash {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.12);
opacity: 0.82;
}
}
`;
document.head.appendChild(style);
}
function ensureBadge(anchor) {
if (anchor.querySelector(`:scope > .${BADGE_CLASS}`)) {
return;
}
const badge = document.createElement("span");
badge.className = BADGE_CLASS;
badge.textContent = "✦";
anchor.appendChild(badge);
}
function markAvatar(anchor) {
if (anchor.getAttribute(PROCESSED_ATTR) === "1") {
return;
}
anchor.classList.add(AVATAR_CLASS);
anchor.setAttribute(PROCESSED_ATTR, "1");
ensureBadge(anchor);
}
function isTargetNameNode(node) {
if (!(node instanceof HTMLElement)) {
return false;
}
const text = normalizeUsername(node.textContent);
return text === normalizeUsername(TARGET_USERNAME);
}
function markNames(container) {
const names = container.querySelectorAll(NAME_SELECTORS);
names.forEach((node) => {
if (!(node instanceof HTMLElement) || !isTargetNameNode(node)) {
return;
}
if (node.classList.contains("username")) {
node.classList.add(NAME_CLASS);
}
if (node.classList.contains("full-name")) {
node.classList.add(FULLNAME_CLASS);
}
});
}
function processTargetAnchor(anchor) {
if (!isTargetUserAnchor(anchor)) {
return;
}
markAvatar(anchor);
const container = anchor.closest(CONTAINER_SELECTORS) || anchor.parentElement;
if (container instanceof HTMLElement) {
markNames(container);
}
}
function scan(root = document) {
if (!(root instanceof Document || root instanceof Element)) {
return;
}
if (root instanceof HTMLAnchorElement) {
processTargetAnchor(root);
}
root
.querySelectorAll(AVATAR_ANCHOR_SELECTORS)
.forEach((anchor) => processTargetAnchor(anchor));
}
ensureStyles();
scan();
new MutationObserver((mutations) => {
for (const mutation of mutations) {
mutation.addedNodes.forEach((node) => {
if (node instanceof Element) {
scan(node);
}
});
}
}).observe(document.body, { childList: true, subtree: true });
})();
由于本人喜欢金光闪闪炫酷吊炸天的视觉效果，所以让GPT写了一个油猴脚本更改了自己的头像视觉效果。该脚本仅本地生效。
效果如下
image733×374 99.9 KB
image370×215 13.6 KB
仅对配置用户生效
// 这里的用户名改为自己的自己就炫酷
const TARGET_USERNAME = "toao";
源码如下
// ==UserScript==
// @name Linux.do Self Avatar Glow
// @namespace http://tampermonkey.net/
// @version 0.2.0
// @description 只给自己的头像和昵称加上更炫的展示效果
// @author Claude
// @match https://linux.do/*
// @grant none
// ==/UserScript==
(function () {
"use strict";
const TARGET_USERNAME = "toao";
const STYLE_ID = "tm-self-avatar-glow-style";
const AVATAR_CLASS = "tm-self-avatar-glow";
const NAME_CLASS = "tm-self-name-glow";
const FULLNAME_CLASS = "tm-self-fullname-glow";
const BADGE_CLASS = "tm-self-badge-glow";
const PROCESSED_ATTR = "data-self-glow-processed";
const AVATAR_NODE_SELECTOR = "img.avatar, .avatar";
const AVATAR_ANCHOR_SELECTORS = [
"a.main-avatar",
".topic-avatar a",
".post-avatar a",
".user-card-avatar a",
"a[data-user-card]",
].join(",");
const CONTAINER_SELECTORS = [
".topic-post",
".topic-avatar",
".topic-meta-data",
".names",
".poster",
".user-card",
".user-card-content",
".user-main",
".user-summary",
"article",
].join(",");
const NAME_SELECTORS = [
".topic-meta-data .names .username",
".topic-meta-data .names .full-name",
".names .username",
".names .full-name",
".poster-info .username",
".poster-info .full-name",
".user-profile-names .username",
".user-profile-names .full-name",
".user-card-content .username",
".user-card-content .full-name",
].join(",");
function normalizeUsername(value) {
return (value || "").trim().replace(/^@/, "").toLowerCase();
}
function isAvatarAnchor(anchor) {
if (!(anchor instanceof HTMLAnchorElement)) {
return false;
}
if (anchor.matches(AVATAR_ANCHOR_SELECTORS)) {
return true;
}
return !!anchor.querySelector(AVATAR_NODE_SELECTOR);
}
function isTargetUserAnchor(anchor) {
if (!(anchor instanceof HTMLAnchorElement) || !isAvatarAnchor(anchor)) {
return false;
}
const userCard = normalizeUsername(anchor.dataset.userCard);
const hrefMatch = anchor.getAttribute("href")?.match(/\/u\/([^/?#]+)/i);
const hrefUser = normalizeUsername(hrefMatch?.[1]);
const aria = normalizeUsername(anchor.getAttribute("aria-label")?.split(" ")[0]);
const target = normalizeUsername(TARGET_USERNAME);
return userCard === target || hrefUser === target || aria === target;
}
function ensureStyles() {
if (document.getElementById(STYLE_ID)) {
return;
}
const style = document.createElement("style");
style.id = STYLE_ID;
style.textContent = `
.${AVATAR_CLASS} {
position: relative !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-radius: 999px;
isolation: isolate;
transform: translateZ(0);
animation: tm-self-avatar-bounce 2.2s ease-in-out infinite;
filter: drop-shadow(0 0 14px rgba(255, 0, 153, 0.5));
}
.${AVATAR_CLASS}::before {
content: "";
position: absolute;
inset: -6px;
border-radius: inherit;
background: conic-gradient(
from 0deg,
#ff2d95,
#7c3aed,
#00e5ff,
#ffe600,
#ff6a00,
#ff2d95
);
animation: tm-self-avatar-spin 1.9s linear infinite;
filter: blur(1px) saturate(1.25);
box-shadow:
0 0 16px rgba(255, 45, 149, 0.65),
0 0 28px rgba(124, 58, 237, 0.45),
0 0 40px rgba(0, 229, 255, 0.3);
z-index: -2;
}
.${AVATAR_CLASS}::after {
content: "";
position: absolute;
inset: -16px;
border-radius: inherit;
background: radial-gradient(circle, rgba(255, 230, 0, 0.38), rgba(255, 45, 149, 0.22) 35%, rgba(0, 229, 255, 0.14) 58%, transparent 75%);
z-index: -3;
pointer-events: none;
animation: tm-self-avatar-pulse 1.1s ease-in-out infinite;
}
.${AVATAR_CLASS} img.avatar,
.${AVATAR_CLASS} .avatar {
position: relative;
z-index: 1;
border-radius: 999px;
border: 3px solid rgba(255, 255, 255, 0.98);
box-shadow:
0 0 0 4px rgba(30, 41, 59, 0.72),
0 0 12px rgba(255, 255, 255, 0.85),
0 0 26px rgba(255, 45, 149, 0.72),
0 0 42px rgba(0, 229, 255, 0.42);
transform: scale(1.08);
}
.${BADGE_CLASS} {
position: absolute;
top: -3px;
right: -3px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(6px) saturate(1.35);
-webkit-backdrop-filter: blur(6px) saturate(1.35);
color: #fff6bf;
font-size: 10px;
font-weight: 900;
line-height: 1;
text-shadow:
0 0 6px rgba(255, 230, 0, 0.75),
0 0 12px rgba(255, 45, 149, 0.35);
box-shadow:
inset 0 0 10px rgba(255, 255, 255, 0.08),
0 0 8px rgba(255, 255, 255, 0.16),
0 0 14px rgba(255, 45, 149, 0.26);
animation: tm-self-badge-flash 1.3s ease-in-out infinite;
pointer-events: none;
}
.${NAME_CLASS},
.${FULLNAME_CLASS} {
position: relative;
display: inline-block;
font-weight: 900 !important;
letter-spacing: 0.05em;
text-shadow:
0 0 8px rgba(255, 255, 255, 0.25),
0 0 16px rgba(255, 45, 149, 0.45),
0 0 24px rgba(0, 229, 255, 0.25);
}
.${NAME_CLASS} {
padding: 0 0.18em;
background: linear-gradient(90deg, #ffe600 0%, #ff2d95 20%, #00e5ff 48%, #7c3aed 70%, #ffe600 100%);
background-size: 240% auto;
color: transparent !important;
-webkit-background-clip: text;
background-clip: text;
animation: tm-self-name-shine 1.8s linear infinite;
filter: saturate(1.2);
}
.${NAME_CLASS}::before {
content: "【至尊】";
margin-right: 0.25em;
color: #ffe600;
text-shadow:
0 0 6px rgba(255, 230, 0, 0.9),
0 0 14px rgba(255, 45, 149, 0.45);
}
.${NAME_CLASS}::after {
content: " ✦✦✦";
color: #ffe600;
font-size: 0.85em;
text-shadow:
0 0 8px rgba(255, 230, 0, 0.9),
0 0 16px rgba(255, 45, 149, 0.45);
animation: tm-self-stars-blink 0.8s steps(2, end) infinite;
}
.${FULLNAME_CLASS} {
color: #ffffff !important;
background: linear-gradient(90deg, rgba(255, 45, 149, 0.18), rgba(0, 229, 255, 0.18));
padding: 0 0.28em;
border-radius: 999px;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.16),
0 0 12px rgba(124, 58, 237, 0.18);
}
.${FULLNAME_CLASS}::before {
content: "◈ 夜店之王 ◈ ";
color: #ff9cf5;
text-shadow:
0 0 8px rgba(255, 45, 149, 0.8),
0 0 16px rgba(124, 58, 237, 0.38);
}
@keyframes tm-self-avatar-spin {
to {
transform: rotate(360deg);
}
}
@keyframes tm-self-avatar-pulse {
0%,
100% {
transform: scale(0.92);
opacity: 0.66;
}
50% {
transform: scale(1.15);
opacity: 1;
}
}
@keyframes tm-self-avatar-bounce {
0%,
100% {
transform: translateY(0) scale(1);
}
25% {
transform: translateY(-1px) scale(1.02) rotate(-1deg);
}
50% {
transform: translateY(-2px) scale(1.04) rotate(1deg);
}
75% {
transform: translateY(-1px) scale(1.02) rotate(-1deg);
}
}
@keyframes tm-self-name-shine {
to {
background-position: 240% center;
}
}
@keyframes tm-self-stars-blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
@keyframes tm-self-badge-flash {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.12);
opacity: 0.82;
}
}
`;
document.head.appendChild(style);
}
function ensureBadge(anchor) {
if (anchor.querySelector(`:scope > .${BADGE_CLASS}`)) {
return;
}
const badge = document.createElement("span");
badge.className = BADGE_CLASS;
badge.textContent = "✦";
anchor.appendChild(badge);
}
function markAvatar(anchor) {
if (anchor.getAttribute(PROCESSED_ATTR) === "1") {
return;
}
anchor.classList.add(AVATAR_CLASS);
anchor.setAttribute(PROCESSED_ATTR, "1");
ensureBadge(anchor);
}
function isTargetNameNode(node) {
if (!(node instanceof HTMLElement)) {
return false;
}
const text = normalizeUsername(node.textContent);
return text === normalizeUsername(TARGET_USERNAME);
}
function markNames(container) {
const names = container.querySelectorAll(NAME_SELECTORS);
names.forEach((node) => {
if (!(node instanceof HTMLElement) || !isTargetNameNode(node)) {
return;
}
if (node.classList.contains("username")) {
node.classList.add(NAME_CLASS);
}
if (node.classList.contains("full-name")) {
node.classList.add(FULLNAME_CLASS);
}
});
}
function processTargetAnchor(anchor) {
if (!isTargetUserAnchor(anchor)) {
return;
}
markAvatar(anchor);
const container = anchor.closest(CONTAINER_SELECTORS) || anchor.parentElement;
if (container instanceof HTMLElement) {
markNames(container);
}
}
function scan(root = document) {
if (!(root instanceof Document || root instanceof Element)) {
return;
}
if (root instanceof HTMLAnchorElement) {
processTargetAnchor(root);
}
root
.querySelectorAll(AVATAR_ANCHOR_SELECTORS)
.forEach((anchor) => processTargetAnchor(anchor));
}
ensureStyles();
scan();
new MutationObserver((mutations) => {
for (const mutation of mutations) {
mutation.addedNodes.forEach((node) => {
if (node instanceof Element) {
scan(node);
}
});
}
}).observe(document.body, { childList: true, subtree: true });
})();
网友解答：
--【壹】--：
由于本人喜欢金光闪闪炫酷吊炸天的视觉效果，所以让GPT写了一个油猴脚本更改了自己的头像视觉效果。该脚本仅本地生效。
效果如下
image733×374 99.9 KB
image370×215 13.6 KB
仅对配置用户生效
// 这里的用户名改为自己的自己就炫酷
const TARGET_USERNAME = "toao";
源码如下
// ==UserScript==
// @name Linux.do Self Avatar Glow
// @namespace http://tampermonkey.net/
// @version 0.2.0
// @description 只给自己的头像和昵称加上更炫的展示效果
// @author Claude
// @match https://linux.do/*
// @grant none
// ==/UserScript==
(function () {
"use strict";
const TARGET_USERNAME = "toao";
const STYLE_ID = "tm-self-avatar-glow-style";
const AVATAR_CLASS = "tm-self-avatar-glow";
const NAME_CLASS = "tm-self-name-glow";
const FULLNAME_CLASS = "tm-self-fullname-glow";
const BADGE_CLASS = "tm-self-badge-glow";
const PROCESSED_ATTR = "data-self-glow-processed";
const AVATAR_NODE_SELECTOR = "img.avatar, .avatar";
const AVATAR_ANCHOR_SELECTORS = [
"a.main-avatar",
".topic-avatar a",
".post-avatar a",
".user-card-avatar a",
"a[data-user-card]",
].join(",");
const CONTAINER_SELECTORS = [
".topic-post",
".topic-avatar",
".topic-meta-data",
".names",
".poster",
".user-card",
".user-card-content",
".user-main",
".user-summary",
"article",
].join(",");
const NAME_SELECTORS = [
".topic-meta-data .names .username",
".topic-meta-data .names .full-name",
".names .username",
".names .full-name",
".poster-info .username",
".poster-info .full-name",
".user-profile-names .username",
".user-profile-names .full-name",
".user-card-content .username",
".user-card-content .full-name",
].join(",");
function normalizeUsername(value) {
return (value || "").trim().replace(/^@/, "").toLowerCase();
}
function isAvatarAnchor(anchor) {
if (!(anchor instanceof HTMLAnchorElement)) {
return false;
}
if (anchor.matches(AVATAR_ANCHOR_SELECTORS)) {
return true;
}
return !!anchor.querySelector(AVATAR_NODE_SELECTOR);
}
function isTargetUserAnchor(anchor) {
if (!(anchor instanceof HTMLAnchorElement) || !isAvatarAnchor(anchor)) {
return false;
}
const userCard = normalizeUsername(anchor.dataset.userCard);
const hrefMatch = anchor.getAttribute("href")?.match(/\/u\/([^/?#]+)/i);
const hrefUser = normalizeUsername(hrefMatch?.[1]);
const aria = normalizeUsername(anchor.getAttribute("aria-label")?.split(" ")[0]);
const target = normalizeUsername(TARGET_USERNAME);
return userCard === target || hrefUser === target || aria === target;
}
function ensureStyles() {
if (document.getElementById(STYLE_ID)) {
return;
}
const style = document.createElement("style");
style.id = STYLE_ID;
style.textContent = `
.${AVATAR_CLASS} {
position: relative !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-radius: 999px;
isolation: isolate;
transform: translateZ(0);
animation: tm-self-avatar-bounce 2.2s ease-in-out infinite;
filter: drop-shadow(0 0 14px rgba(255, 0, 153, 0.5));
}
.${AVATAR_CLASS}::before {
content: "";
position: absolute;
inset: -6px;
border-radius: inherit;
background: conic-gradient(
from 0deg,
#ff2d95,
#7c3aed,
#00e5ff,
#ffe600,
#ff6a00,
#ff2d95
);
animation: tm-self-avatar-spin 1.9s linear infinite;
filter: blur(1px) saturate(1.25);
box-shadow:
0 0 16px rgba(255, 45, 149, 0.65),
0 0 28px rgba(124, 58, 237, 0.45),
0 0 40px rgba(0, 229, 255, 0.3);
z-index: -2;
}
.${AVATAR_CLASS}::after {
content: "";
position: absolute;
inset: -16px;
border-radius: inherit;
background: radial-gradient(circle, rgba(255, 230, 0, 0.38), rgba(255, 45, 149, 0.22) 35%, rgba(0, 229, 255, 0.14) 58%, transparent 75%);
z-index: -3;
pointer-events: none;
animation: tm-self-avatar-pulse 1.1s ease-in-out infinite;
}
.${AVATAR_CLASS} img.avatar,
.${AVATAR_CLASS} .avatar {
position: relative;
z-index: 1;
border-radius: 999px;
border: 3px solid rgba(255, 255, 255, 0.98);
box-shadow:
0 0 0 4px rgba(30, 41, 59, 0.72),
0 0 12px rgba(255, 255, 255, 0.85),
0 0 26px rgba(255, 45, 149, 0.72),
0 0 42px rgba(0, 229, 255, 0.42);
transform: scale(1.08);
}
.${BADGE_CLASS} {
position: absolute;
top: -3px;
right: -3px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(6px) saturate(1.35);
-webkit-backdrop-filter: blur(6px) saturate(1.35);
color: #fff6bf;
font-size: 10px;
font-weight: 900;
line-height: 1;
text-shadow:
0 0 6px rgba(255, 230, 0, 0.75),
0 0 12px rgba(255, 45, 149, 0.35);
box-shadow:
inset 0 0 10px rgba(255, 255, 255, 0.08),
0 0 8px rgba(255, 255, 255, 0.16),
0 0 14px rgba(255, 45, 149, 0.26);
animation: tm-self-badge-flash 1.3s ease-in-out infinite;
pointer-events: none;
}
.${NAME_CLASS},
.${FULLNAME_CLASS} {
position: relative;
display: inline-block;
font-weight: 900 !important;
letter-spacing: 0.05em;
text-shadow:
0 0 8px rgba(255, 255, 255, 0.25),
0 0 16px rgba(255, 45, 149, 0.45),
0 0 24px rgba(0, 229, 255, 0.25);
}
.${NAME_CLASS} {
padding: 0 0.18em;
background: linear-gradient(90deg, #ffe600 0%, #ff2d95 20%, #00e5ff 48%, #7c3aed 70%, #ffe600 100%);
background-size: 240% auto;
color: transparent !important;
-webkit-background-clip: text;
background-clip: text;
animation: tm-self-name-shine 1.8s linear infinite;
filter: saturate(1.2);
}
.${NAME_CLASS}::before {
content: "【至尊】";
margin-right: 0.25em;
color: #ffe600;
text-shadow:
0 0 6px rgba(255, 230, 0, 0.9),
0 0 14px rgba(255, 45, 149, 0.45);
}
.${NAME_CLASS}::after {
content: " ✦✦✦";
color: #ffe600;
font-size: 0.85em;
text-shadow:
0 0 8px rgba(255, 230, 0, 0.9),
0 0 16px rgba(255, 45, 149, 0.45);
animation: tm-self-stars-blink 0.8s steps(2, end) infinite;
}
.${FULLNAME_CLASS} {
color: #ffffff !important;
background: linear-gradient(90deg, rgba(255, 45, 149, 0.18), rgba(0, 229, 255, 0.18));
padding: 0 0.28em;
border-radius: 999px;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.16),
0 0 12px rgba(124, 58, 237, 0.18);
}
.${FULLNAME_CLASS}::before {
content: "◈ 夜店之王 ◈ ";
color: #ff9cf5;
text-shadow:
0 0 8px rgba(255, 45, 149, 0.8),
0 0 16px rgba(124, 58, 237, 0.38);
}
@keyframes tm-self-avatar-spin {
to {
transform: rotate(360deg);
}
}
@keyframes tm-self-avatar-pulse {
0%,
100% {
transform: scale(0.92);
opacity: 0.66;
}
50% {
transform: scale(1.15);
opacity: 1;
}
}
@keyframes tm-self-avatar-bounce {
0%,
100% {
transform: translateY(0) scale(1);
}
25% {
transform: translateY(-1px) scale(1.02) rotate(-1deg);
}
50% {
transform: translateY(-2px) scale(1.04) rotate(1deg);
}
75% {
transform: translateY(-1px) scale(1.02) rotate(-1deg);
}
}
@keyframes tm-self-name-shine {
to {
background-position: 240% center;
}
}
@keyframes tm-self-stars-blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
@keyframes tm-self-badge-flash {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.12);
opacity: 0.82;
}
}
`;
document.head.appendChild(style);
}
function ensureBadge(anchor) {
if (anchor.querySelector(`:scope > .${BADGE_CLASS}`)) {
return;
}
const badge = document.createElement("span");
badge.className = BADGE_CLASS;
badge.textContent = "✦";
anchor.appendChild(badge);
}
function markAvatar(anchor) {
if (anchor.getAttribute(PROCESSED_ATTR) === "1") {
return;
}
anchor.classList.add(AVATAR_CLASS);
anchor.setAttribute(PROCESSED_ATTR, "1");
ensureBadge(anchor);
}
function isTargetNameNode(node) {
if (!(node instanceof HTMLElement)) {
return false;
}
const text = normalizeUsername(node.textContent);
return text === normalizeUsername(TARGET_USERNAME);
}
function markNames(container) {
const names = container.querySelectorAll(NAME_SELECTORS);
names.forEach((node) => {
if (!(node instanceof HTMLElement) || !isTargetNameNode(node)) {
return;
}
if (node.classList.contains("username")) {
node.classList.add(NAME_CLASS);
}
if (node.classList.contains("full-name")) {
node.classList.add(FULLNAME_CLASS);
}
});
}
function processTargetAnchor(anchor) {
if (!isTargetUserAnchor(anchor)) {
return;
}
markAvatar(anchor);
const container = anchor.closest(CONTAINER_SELECTORS) || anchor.parentElement;
if (container instanceof HTMLElement) {
markNames(container);
}
}
function scan(root = document) {
if (!(root instanceof Document || root instanceof Element)) {
return;
}
if (root instanceof HTMLAnchorElement) {
processTargetAnchor(root);
}
root
.querySelectorAll(AVATAR_ANCHOR_SELECTORS)
.forEach((anchor) => processTargetAnchor(anchor));
}
ensureStyles();
scan();
new MutationObserver((mutations) => {
for (const mutation of mutations) {
mutation.addedNodes.forEach((node) => {
if (node instanceof Element) {
scan(node);
}
});
}
}).observe(document.body, { childList: true, subtree: true });
})();