Add Rainbow Span to UserName

Find UserName elements and wrap them in a span with a rainbow class.

  1. // ==UserScript==
  2. // @name Add Rainbow Span to UserName
  3. // @license MIT
  4. // @namespace http://tampermonkey.net/
  5. // @version 1.1
  6. // @description Find UserName elements and wrap them in a span with a rainbow class.
  7. // @author Gangz1o
  8. // @match *://*/*
  9. // @grant none
  10. // ==/UserScript==
  11. /*
  12. 火焰特效
  13. Fire Style
  14. .rainbow {
  15. -webkit-animation-duration: 0.8s;
  16. -webkit-animation-name: flamemotion;
  17. -webkit-animation-iteration-count: infinite;
  18. -webkit-animation-direction: alternate;
  19. color: #ffe
  20. }
  21. @-webkit-keyframes flamemotion {
  22. 0% {
  23. text-shadow: 0 -0.05em .2em #fff,.01em -0.02em .15em #fe0,.01em -0.05em .15em #fc0,.02em -0.15em .2em #f90,.04em -0.2em .3em #f70,.05em -0.25em .4em #f70,.06em -0.2em .9em #f50,.1em -0.1em 1em #f40
  24. }
  25.  
  26. 25% {
  27. text-shadow: 0 -0.05em .2em #fff,0 -0.05em .17em #fe0,.04em -0.12em .22em #fc0,.04em -0.13em .27em #f90,.05em -0.23em .33em #f70,.07000000000000001em -0.28em .47em #f70,.1em -0.3em .8em #f50,.1em -0.3em .9em #f40
  28. }
  29.  
  30. 50% {
  31. text-shadow: 0 -0.05em .2em #fff,.01em -0.02em .15em #fe0,.01em -0.05em .15em #fc0,.02em -0.15em .2em #f90,.04em -0.2em .3em #f70,.05em -0.25em .4em #f70,.06em -0.2em .9em #f50,.1em -0.1em 1em #f40
  32. }
  33.  
  34. 75% {
  35. text-shadow: 0 -0.05em .2em #fff,0 -0.06em .18em #fe0,.05em -0.15em .23em #fc0,.05em -0.15em .3em #f90,.07000000000000001em -0.25em .4em #f70,.09em -0.3em .5em #f70,.1em -0.3em .9em #f50,.1em -0.3em 1em #f40
  36. }
  37.  
  38. 100% {
  39. text-shadow: 0 -0.05em .2em #fff,.01em -0.02em .15em #fe0,.01em -0.05em .15em #fc0,.02em -0.15em .2em #f90,.04em -0.2em .3em #f70,.05em -0.25em .4em #f70,.06em -0.2em .9em #f50,.1em -0.1em 1em #f40
  40. }
  41. }
  42.  
  43.  
  44. */
  45.  
  46. (function() {
  47. 'use strict';
  48.  
  49. // 这里设置你的用户名,如果你有多个的话
  50. const userNameTexts = ["UserName1", "UserName2"];
  51.  
  52. // 查找页面中的所有元素,排除 <script> 和 <style>
  53. const elements = document.querySelectorAll('*:not(script):not(style)');
  54.  
  55. elements.forEach(element => {
  56. if (element.childNodes.length === 1 && element.childNodes[0].nodeType === Node.TEXT_NODE) {
  57. const text = element.textContent.trim();
  58. // 检查当前元素的文本内容是否在 userNameTexts 数组中
  59. if (userNameTexts.includes(text)) {
  60. // 替换文本为带有 <span class="rainbow"> 的新内容
  61. element.innerHTML = `<span class="rainbow">${text}</span>`;
  62. }
  63. }
  64. });
  65.  
  66. // 为 .rainbow 类添加一些样式
  67. const style = document.createElement('style');
  68. style.textContent = `
  69. .rainbow {
  70. background: linear-gradient(135deg, #9B5DE5, #F15BB5, #FEE440, #00F5D4, #00BBF9,#9ED4E3);
  71. -webkit-background-clip: text;
  72. background-clip: text;
  73. color: transparent;
  74. animation: rainbow_animation 8s cubic-bezier(0.3, 0, 1, 1) infinite;
  75. background-size: 300% 100%;
  76. }
  77. @keyframes rainbow_animation {
  78. 0%,100% {
  79. background-position: 0 50%;
  80. }
  81. 20% {
  82. background-position: 100% 50%;
  83. }
  84. }
  85. `;
  86. document.head.appendChild(style);
  87. })();