小文专属

点击屏幕时显示特效和文字

  1. // ==UserScript==
  2. // @name 小文专属
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.036
  5. // @description 点击屏幕时显示特效和文字
  6. // @author You
  7. // @match *://*/*
  8. // @exclude *://cps.kwaixiaodian.com/* // 排除特定网站
  9. // @grant GM_addStyle
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function () {
  14. 'use strict';
  15. // 在腾讯文档中禁用脚本
  16. if (window.location.hostname === 'docs.qq.com') {
  17. return; // 如果在腾讯文档网站上,脚本直接停止执行
  18. }
  19.  
  20.  
  21. // 爱心颜色变量,方便修改颜色时同步文字和爱心的颜色
  22. const heartColor = '#FF7F7F';
  23. const texts = ['2025 小文天天开心','2025 小文万事如意','2025 小文升职加薪']; // 文字数组,交替显示
  24.  
  25. // 添加爱心动画和文字的样式
  26. GM_addStyle(`
  27. .heart {
  28. position: absolute;
  29. width: 20px;
  30. height: 20px;
  31. background-color: ${heartColor};
  32. transform: rotate(45deg);
  33. animation: heartbeat 1s ease-out forwards;
  34. z-index: 9999; /* 将爱心元素的 z-index 设置得非常高 */
  35. pointer-events: none; /* 禁用爱心的鼠标事件 */
  36. }
  37.  
  38. .heart::before,
  39. .heart::after {
  40. content: "";
  41. position: absolute;
  42. width: 20px;
  43. height: 20px;
  44. background-color: ${heartColor};
  45. border-radius: 50%;
  46. }
  47.  
  48. .heart::before {
  49. top: -10px;
  50. left: 0px;
  51. }
  52.  
  53. .heart::after {
  54. top: 0px;
  55. left: -10px;
  56. }
  57.  
  58. @keyframes heartbeat {
  59. 0% {
  60. transform: scale(0) rotate(45deg);
  61. opacity: 1;
  62. }
  63. 50% {
  64. transform: scale(1.1) rotate(45deg);
  65. opacity: 0.8;
  66. }
  67. 100% {
  68. transform: scale(1) rotate(45deg);
  69. opacity: 0;
  70. }
  71. }
  72.  
  73. .text {
  74. position: absolute;
  75. color: ${heartColor}; /* 使用与爱心相同的颜色 */
  76. font-size: 14px;
  77. font-weight: bold;
  78. animation: floatText 1s ease-out forwards;
  79. z-index: 9998; /* 设置较低的 z-index */
  80. pointer-events: none; /* 禁用文字的鼠标事件 */
  81. user-select: none; /* 禁止选中生成的文字 */
  82. }
  83.  
  84. @keyframes floatText {
  85. 0% {
  86. opacity: 1;
  87. transform: translateY(0);
  88. }
  89. 100% {
  90. opacity: 0;
  91. transform: translateY(-50px);
  92. }
  93. }
  94. `);
  95.  
  96. // 确保页面完全加载
  97. window.addEventListener('load', function () {
  98. console.log('页面已加载');
  99.  
  100. // 监听鼠标点击事件
  101. document.addEventListener('click', function (event) {
  102. // 如果点击的目标是爱心或文字元素,则不处理
  103. if (event.target.classList.contains('heart') || event.target.classList.contains('text')) {
  104. return;
  105. }
  106.  
  107. // 使用 pageX 和 pageY 获取页面坐标
  108. const x = event.pageX;
  109. const y = event.pageY;
  110.  
  111. // 随机选择显示的文字
  112. const randomText = texts[Math.floor(Math.random() * texts.length)];
  113.  
  114. // 创建文字元素
  115. const text = document.createElement('div');
  116. text.classList.add('text');
  117. text.innerText = randomText;
  118.  
  119. // 设置文字的位置为点击位置上方
  120. text.style.left = `${x - 30}px`; // 调整水平位置
  121. text.style.top = `${y - 50}px`; // 调整垂直位置
  122.  
  123. // 创建爱心元素
  124. const heart = document.createElement('div');
  125. heart.classList.add('heart');
  126.  
  127. // 设置爱心的位置为点击位置
  128. heart.style.left = `${x - 10}px`; // 调整位置使爱心的中心对准点击点
  129. heart.style.top = `${y - 10}px`;
  130.  
  131. // 将文字和爱心元素添加到页面中
  132. document.body.appendChild(text);
  133. document.body.appendChild(heart);
  134.  
  135. // 设置定时器,0.8秒后删除文字和爱心元素
  136. setTimeout(() => {
  137. text.remove();
  138. heart.remove();
  139. }, 800);
  140. });
  141. });
  142. })();
  143.  
  144.