April Fools CSS

Some CSS april fools

当前为 2024-02-01 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name April Fools CSS
  3. // @description Some CSS april fools
  4. // @author jerone
  5. // @namespace https://github.com/jerone/UserScripts/tree/master/April_Fools_CSS
  6. // @copyright 2014+, jerone (https://github.com/jerone)
  7. // @license CC-BY-NC-SA-4.0; https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode
  8. // @license GPL-3.0-or-later; http://www.gnu.org/licenses/gpl-3.0.txt
  9. // @supportURL https://github.com/jerone/UserScripts/issues
  10. // @contributionURL https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VCYMHWQ7ZMBKW
  11. // @include *
  12. // @version 1.0
  13. // ==/UserScript==
  14.  
  15. if(window.top===window){
  16.  
  17. var duration = 2000, // [Integer, positive, miliseconds] This controls the duration of an april fool item;
  18. interval = 8000; // [Integer, positive, miliseconds] This controls the interval of the next april fool;
  19.  
  20. var aprilFools = [ // [String] April fools in CSS; Use {duration} for a dynamic duration;
  21. "img { \
  22. -webkit-transform: rotate(180deg); \
  23. -moz-transform: rotate(180deg); \
  24. -ms-transform: rotate(180deg); \
  25. -o-transform: rotate(180deg); \
  26. transform: rotate(180deg); \
  27. }",
  28. "body { \
  29. -webkit-transform: rotate(1deg); \
  30. -moz-transform: rotate(1deg); \
  31. -ms-transform: rotate(1deg); \
  32. -o-transform: rotate(1deg); \
  33. transform: rotate(1deg); \
  34. }",
  35. "body { \
  36. -webkit-perspective: 300px; \
  37. -moz-perspective: 300px; \
  38. -ms-perspective: 300px; \
  39. perspective: 300px; \
  40. -webkit-transform: rotateY(180deg); \
  41. -moz-transform: rotateY(180deg); \
  42. -ms-transform: rotateY(180deg); \
  43. transform: rotateY(180deg); \
  44. -webkit-transform-style: preserve-3d; \
  45. -moz-transform-style: preserve-3d; \
  46. -ms-transform-style: preserve-3d; \
  47. transform-style: preserve-3d; \
  48. }",
  49. "img { \
  50. -webkit-transform: scale(0.8); \
  51. -moz-transform: scale(0.8); \
  52. -ms-transform: scale(0.8); \
  53. -o-transform: scale(0.8); \
  54. transform: scale(0.8); \
  55. }",
  56. "img { -webkit-animation: spin {duration}s linear infinite; } \
  57. @-webkit-keyframes spin { \
  58. 0% { -webkit-transform: rotate(0deg); } \
  59. 100% { -webkit-transform: rotate(360deg); } \
  60. }",
  61. "body { -webkit-animation: rainbow {duration}s infinite; } \
  62. @-webkit-keyframes rainbow { \
  63. 100% { -webkit-filter: hue-rotate(360deg); } \
  64. }",
  65. ],
  66. aprilFool = 0, aprilFooled = 0;
  67.  
  68. interval = Math.abs(interval);
  69. duration = Math.max(1000, Math.abs(duration));
  70.  
  71. window.setInterval(function(){
  72. do { aprilFool = Math.floor(Math.random() * aprilFools.length);
  73. } while(aprilFool === aprilFooled);
  74. document.documentElement.classList.add("aprilfool" + (aprilFooled = aprilFool));
  75. window.console&&console.log("added aprilfool" + aprilFool);
  76. window.setTimeout(function(){
  77. document.documentElement.classList.remove("aprilfool" + aprilFooled);
  78. window.console&&console.log("removed aprilfool" + aprilFool);
  79. }, duration);
  80. }, interval + duration + 10);
  81.  
  82. for(var aprilFool in aprilFools){
  83. GM_addStyle(".aprilfool" + aprilFool + " " + aprilFools[aprilFool].replace("{duration}", duration/1000));
  84. }
  85. }

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址