April Fools CSS

Some CSS april fools
目前为 2016-02-20 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name           April Fools CSS
// @description    Some CSS april fools
// @author         jerone
// @namespace      https://github.com/jerone/UserScripts/tree/master/April_Fools_CSS
// @copyright      2014+, jerone (http://jeroenvanwarmerdam.nl)
// @license        GNU GPLv3
// @supportURL     https://github.com/jerone/UserScripts/issues
// @contributionURL https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VCYMHWQ7ZMBKW
// @include        *
// @version        1.0
// ==/UserScript==
 
if(window.top===window){
 
	var duration = 2000,	// [Integer, positive, miliseconds] This controls the duration of an april fool item;
		interval = 8000;	// [Integer, positive, miliseconds] This controls the interval of the next april fool;
 
	var aprilFools = [		// [String] April fools in CSS; Use {duration} for a dynamic duration;
			"img {										\
				-webkit-transform: rotate(180deg);		\
				   -moz-transform: rotate(180deg);		\
				    -ms-transform: rotate(180deg);		\
				     -o-transform: rotate(180deg);		\
				        transform: rotate(180deg);		\
			}",
			"body {										\
				-webkit-transform: rotate(1deg);		\
				   -moz-transform: rotate(1deg);		\
				    -ms-transform: rotate(1deg);		\
				     -o-transform: rotate(1deg);		\
				        transform: rotate(1deg);		\
			}",
			"body {										\
				-webkit-perspective: 300px; 			\
				   -moz-perspective: 300px; 			\
				    -ms-perspective: 300px; 			\
					    perspective: 300px;				\
				-webkit-transform: rotateY(180deg);		\
				   -moz-transform: rotateY(180deg);		\
				    -ms-transform: rotateY(180deg);		\
					    transform: rotateY(180deg);		\
				-webkit-transform-style: preserve-3d;	\
				   -moz-transform-style: preserve-3d;	\
				    -ms-transform-style: preserve-3d;	\
					    transform-style: preserve-3d;	\
			}",
			"img {										\
				-webkit-transform: scale(0.8); 			\
				   -moz-transform: scale(0.8); 			\
				    -ms-transform: scale(0.8); 			\
				     -o-transform: scale(0.8); 			\
					transform: scale(0.8); 				\
			}",
			"img { -webkit-animation: spin {duration}s linear infinite; }	\
			@-webkit-keyframes spin {										\
				  0% { -webkit-transform: rotate(0deg); }					\
				100% { -webkit-transform: rotate(360deg); }					\
			}",
			"body { -webkit-animation: rainbow {duration}s infinite; }		\
			@-webkit-keyframes rainbow {									\
				100% { -webkit-filter: hue-rotate(360deg); }				\
			}",
		],
		aprilFool = 0, aprilFooled = 0;
 
	interval = Math.abs(interval);
	duration = Math.max(1000, Math.abs(duration));
 
	window.setInterval(function(){
		do { aprilFool = Math.floor(Math.random() * aprilFools.length);
		} while(aprilFool === aprilFooled);
		document.documentElement.classList.add("aprilfool" + (aprilFooled = aprilFool));
		window.console&&console.log("added aprilfool" + aprilFool);
		window.setTimeout(function(){
			document.documentElement.classList.remove("aprilfool" + aprilFooled);
			window.console&&console.log("removed aprilfool" + aprilFool);
		}, duration);
	}, interval + duration + 10);
 
	for(var aprilFool in aprilFools){
		GM_addStyle(".aprilfool" + aprilFool + " " + aprilFools[aprilFool].replace("{duration}", duration/1000));
	}
}
欢迎访问Greasy Fork镜像
