April Fools CSS

Some CSS april fools

当前为 2014-03-19 提交的版本,查看 最新版本

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

QingJ © 2025

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