以下是 jQ社交媒体网络按钮代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/arthref.css">
</head>
<body>
<div class="example-site"></div><!--.example-site-->
<div id="menu" style="left:50%; top:0; margin: -125px 0 0 -125px; width:250px; height:250px; background:#f00; border-radius:100%; position:fixed; z-index:11; cursor:pointer;">
</div>
<script src="js/jquery.min.js"></script>
<script src="js/socialProfiles.js"></script>
<script>
$(document).ready(function () {
$('#menu').socialProfiles({
animation: 'abc',
email: 'tolgaergin@gmail.com',
facebook: 'tolgaergin',
twitter: 'tolgaergin',
pinterest: 'tolga',
dribbble: 'bbb',
skype: 'tolgaergin.com'
});
});
</script>
</body>
</html>
JS代码(socialProfiles.js):
/*Plugin Name:socialProfilesVersion:1.0Plugin URI:https://github.com/tolgaergin/socialDescription:To list social accounts with 46 iconsAuthor:Tolga ErginAuthor URI:http://tolgaergin.comDesigner:G枚khun G眉neyhanDesigner URI:http://gokhunguneyhan.com*/
/* PLUGIN USAGE */
/*$('#clickable').socialProfiles({
email:'example@example.com',facebook:'tolgaergin',twitter:'tolgaergin',pinterest:'tolga',dribbble:'bbb',skype:'tolgaergin.com'}
);
*/
(function($){
$.fn.extend({
socialProfiles:function(options){
var defaults ={
animation:'launchpad',// launchpad,launchpadReverse,slideTop,slideRight,slideBottom,slideLeft,chain chainAnimationSpeed:100,// fadetime for each social element - 1000 is one second blur:false,apple:null,myspace:null,blackberry:null,wikipedia:null,email:null,wordpress:null,deviantart:null,forrst:null,technorati:null,xbox:null,android:null,evernote:null,zerply:null,xing:null,vimeo:null,tumblr:null,facebook:null,digg:null,delicious:null,friendfeed:null,linkedin:null,paypal:null,behance:null,foursquare:null,windows:null,skype:null,twitter:null,posterous:null,lastfm:null,quora:null,youtube:null,pinterest:null,path:null,google:null,flud:null,stumbleupon:null,reddit:null,rss:null,scoutzie:null,blogger:null,grooveshark:null,aim:null,yahoo:null,flickr:null,dribbble:null,instagram:null}
;
var options = $.extend(true,defaults,options);
var beforeDivs = '<div class="arthref arthrefSocialProfiles"><div class="overlay '+options.animation+'"><div class="icon-container"><div class="centered"><ul>';
var afterDivs = '</ul></div></div></div></div>';
var listItem = '';
if(options.apple){
listItem += '<li><a href="https://itunes.apple.com/'+options.apple+'" target="_blank" rel="nofollow" class="aApple"><span></span></a><span>Apple</span></li>';
}
if(options.myspace){
listItem += '<li><a href="http://www.myspace.com/'+options.myspace+'" target="_blank" rel="nofollow" class="aMySpace"><span></span></a><span>MySpace</span></li>';
}
if(options.blackberry){
listItem += '<li><a href="http://'+options.blackberry+'" target="_blank" rel="nofollow" class="aBlackBerry"><span></span></a><span>BlackBerry</span></li>';
}
if(options.wikipedia){
listItem += '<li><a href="http://en.wikipedia.org/wiki/User:'+options.wikipedia+'" target="_blank" rel="nofollow" class="aWikipedia"><span></span></a><span>Wikipedia</span></li>';
}
if(options.email){
listItem += '<li><a href="mailto:'+options.email+'" class="aEMail"><span></span></a><span>E-Mail</span></li>';
}
if(options.wordpress){
listItem += '<li><a href="http://'+options.wordpress+'.wordpress.com" target="_blank" rel="nofollow" class="aWordpress"><span></span></a><span>Wordpress</span></li>';
}
if(options.deviantart){
listItem += '<li><a href="http://'+options.deviantart+'.deviantart.com" target="_blank" rel="nofollow" class="aDeviantArt"><span></span></a><span>DeviantArt</span></li>';
}
if(options.forrst){
listItem += '<li><a href="http://forrst.com/people/'+options.forrst+'" target="_blank" rel="nofollow" class="aForrst"><span></span></a><span>Forrst</span></li>';
}
if(options.technorati){
listItem += '<li><a href="http://technorati.com/people/technorati/'+options.technorati+'" target="_blank" rel="nofollow" class="aTechnorati"><span></span></a><span>Technorati</span></li>';
}
if(options.xbox){
listItem += '<li><a href="http://'+options.xbox+'" target="_blank" rel="nofollow" class="aXBox"><span></span></a><span>XBox</span></li>';
}
if(options.android){
listItem += '<li><a href="https://play.google.com/store/apps/developer?id='+options.android+'" target="_blank" rel="nofollow" class="aAndroid"><span></span></a><span>Android</span></li>';
}
if(options.evernote){
listItem += '<li><a href="http://'+options.evernote+'" target="_blank" rel="nofollow" class="aEvernote"><span></span></a><span>Evernote</span></li>';
}
if(options.zerply){
listItem += '<li><a href="http://zerply.com/'+options.zerply+'" target="_blank" rel="nofollow" class="aZerply"><span></span></a><span>Zerply</span></li>';
}
if(options.xing){
listItem += '<li><a href="http://www.xing.com/profile/'+options.xing+'" target="_blank" rel="nofollow" class="aXing"><span></span></a><span>Xing</span></li>';
}
if(options.vimeo){
listItem += '<li><a href="http://vimeo.com/'+options.vimeo+'" target="_blank" rel="nofollow" class="aVimeo"><span></span></a><span>Vimeo</span></li>';
}
if(options.tumblr){
listItem += '<li><a href="http://'+options.tumblr+'.tumblr.com" target="_blank" rel="nofollow" class="aTumblr"><span></span></a><span>Tumblr</span></li>';
}
if(options.facebook){
listItem += '<li><a href="http://facebook.com/'+options.facebook+'" target="_blank" rel="nofollow" class="aFacebook"><span></span></a><span>Facebook</span></li>';
}
if(options.digg){
listItem += '<li><a href="http://digg.com/users/'+options.digg+'" target="_blank" rel="nofollow" class="aDigg"><span></span></a><span>Digg</span></li>';
}
if(options.delicious){
listItem += '<li><a href="http://delicious.com/'+options.delicious+'" target="_blank" rel="nofollow" class="aDelicious"><span></span></a><span>Delicious</span></li>';
}
if(options.friendfeed){
listItem += '<li><a href="http://friendfeed.com/'+options.friendfeed+'" target="_blank" rel="nofollow" class="aFriendFeed"><span></span></a><span>FriendFeed</span></li>';
}
if(options.linkedin){
listItem += '<li><a href="http://'+options.linkedin+'" target="_blank" rel="nofollow" class="aLinkedIn"><span></span></a><span>LinkedIn</span></li>';
}
if(options.paypal){
listItem += '<li><a href="https://'+options.paypal+'" target="_blank" rel="nofollow" class="aPaypal"><span></span></a><span>Paypal</span></li>';
}
if(options.behance){
listItem += '<li><a href="http://www.behance.net/'+options.behance+'" target="_blank" rel="nofollow" class="aBehance"><span></span></a><span>Behance</span></li>';
}
if(options.foursquare){
listItem += '<li><a href="https://foursquare.com/'+options.foursquare+'" target="_blank" rel="nofollow" class="aFoursquare"><span></span></a><span>Foursquare</span></li>';
}
if(options.windows){
listItem += '<li><a href="http://'+options.windows+'" target="_blank" rel="nofollow" class="aWindows"><span></span></a><span>Windows</span></li>';
}
if(options.skype){
listItem += '<li><a href="skype:'+options.skype+'?add" target="_blank" rel="nofollow" class="aSkype"><span></span></a><span>Skype</span></li>';
}
if(options.twitter){
listItem += '<li><a href="https://twitter.com/'+options.twitter+'" target="_blank" rel="nofollow" class="aTwitter"><span></span></a><span>Twitter</span></li>';
}
if(options.posterous){
listItem += '<li><a href="http://'+options.posterous+'.posterous.com" target="_blank" rel="nofollow" class="aPosterous"><span></span></a><span>Posterous</span></li>';
}
if(options.lastfm){
listItem += '<li><a href="http://www.lastfm.com.tr/user/'+options.lastfm+'" target="_blank" rel="nofollow" class="aLastFm"><span></span></a><span>Last.fm</span></li>';
}
if(options.quora){
listItem += '<li><a href="http://www.quora.com/'+options.quora+'" target="_blank" rel="nofollow" class="aQuora"><span></span></a><span>Quora</span></li>';
}
if(options.youtube){
listItem += '<li><a href="http://youtube.com/user/'+options.youtube+'" target="_blank" rel="nofollow" class="aYouTube"><span></span></a><span>YouTube</span></li>';
}
if(options.pinterest){
listItem += '<li><a href="http://pinterest.com/'+options.pinterest+'" target="_blank" rel="nofollow" class="aPinterest"><span></span></a><span>Pinterest</span></li>';
}
if(options.path){
listItem += '<li><a href="http://path.com/'+options.path+'" target="_blank" rel="nofollow" class="aPath"><span></span></a><span>Path</span></li>';
}
if(options.google){
listItem += '<li><a href="https://plus.google.com/'+options.google+'" target="_blank" rel="nofollow" class="aGooglePlus"><span></span></a><span>Google+</span></li>';
}
if(options.flud){
listItem += '<li><a href="http://'+options.flud+'" target="_blank" rel="nofollow" class="aFlud"><span></span></a><span>Flud</span></li>';
}
if(options.stumbleupon){
listItem += '<li><a href="http://www.stumbleupon.com/stumbler/'+options.stumbleupon+'" target="_blank" rel="nofollow" class="aStumbleUpon"><span></span></a><span>StumbleUpon</span></li>';
}
if(options.reddit){
listItem += '<li><a href="http://www.reddit.com/user/'+options.reddit+'" target="_blank" rel="nofollow" class="aReddit"><span></span></a><span>Reddit</span></li>';
}
if(options.rss){
listItem += '<li><a href="http://feeds.feedburner.com/'+options.rss+'" target="_blank" rel="nofollow" class="aRSS"><span></span></a><span>RSS</span></li>';
}
if(options.scoutzie){
listItem += '<li><a href="http://scoutzie.com/'+options.scoutzie+'" target="_blank" rel="nofollow" class="aScoutzie"><span></span></a><span>Scoutzie</span></li>';
}
if(options.blogger){
listItem += '<li><a href="http://'+options.blogger+'.blogspot.com" target="_blank" rel="nofollow" class="aBlogger"><span></span></a><span>Blogger</span></li>';
}
if(options.grooveshark){
listItem += '<li><a href="http://grooveshark.com/#!/'+options.grooveshark+'" target="_blank" rel="nofollow" class="aGrooveshark"><span></span></a><span>Grooveshark</span></li>';
}
if(options.aim){
listItem += '<li><a href="http://'+options.aim+'" target="_blank" rel="nofollow" class="aAIM"><span></span></a><span>AIM</span></li>';
}
if(options.yahoo){
listItem += '<li><a href="http://'+options.yahoo+'" target="_blank" rel="nofollow" class="aYahoo"><span></span></a><span>Yahoo</span></li>';
}
if(options.flickr){
listItem += '<li><a href="http://flickr.com/'+options.flickr+'" target="_blank" rel="nofollow" class="aFlickr"><span></span></a><span>Flickr</span></li>';
}
if(options.dribbble){
listItem += '<li><a href="http://dribbble.com/'+options.dribbble+'" target="_blank" rel="nofollow" class="aDribbble"><span></span></a><span>Dribbble</span></li>';
}
if(options.instagram){
listItem += '<li><a href="http://instagram.com/'+options.instagram+'" target="_blank" rel="nofollow" class="aInstagram"><span></span></a><span>Instagram</span></li>';
}
$('body').append(beforeDivs+listItem+afterDivs);
return this.each(function(){
var o = options;
var obj = $(this);
var body = $('body');
var overlay = $('.arthrefSocialProfiles').find('.overlay');
var ulElement = overlay.find('ul');
var liElements = ulElement.find('li');
if(o.blur && $.browser.webkit) overlay.addClass('opaque');
obj.click(function(){
if(o.blur && $.browser.webkit) body.children().not('.arthref,script').addClass('blurred');
overlay.css('display','block');
setTimeout(function(){
overlay.addClass('active');
ulElement.addClass('active');
if(o.animation=='chain') chainAnimation(liElements,o.chainAnimationSpeed,'1');
}
,0);
}
);
overlay.click(function(){
if(o.blur && $.browser.webkit) body.children().removeClass('blurred');
overlay.removeClass('active');
ulElement.removeClass('active');
setTimeout(function(){
overlay.css('display','none');
}
,300);
}
);
liElements.click(function(e){
e.stopPropagation();
}
);
}
);
function chainAnimation(e,s,o){
var $fade = $(e);
$fade.each(function( i ){
$(this).delay(i * s).fadeTo(s,o);
}
);
}
;
}
}
);
}
)(jQuery);
CSS代码(arthref.css):
.arthref{position:fixed;top:0;left:0;z-index:99;}
.arthref .overlay{z-index:100;position:fixed;width:100%;height:100%;opacity:0;background:rgba(0,0,0,0.8);pointer-events:none;display:none;-webkit-transition:all 200ms ease-in-out;-moz-transition:all 200ms ease-in-out;-o-transition:all 200ms ease-in-out;-ms-transition:all 200ms ease-in-out;transition:all 200ms ease-in-out;}
.arthref .opaque{background:rgba(0,0,0,0.2) !important;}
.arthref .overlay.active{opacity:1;pointer-events:all;}
.arthref .icon-container{z-index:101;position:absolute;top:0;left:0;bottom:0;right:0;text-align:center;}
.arthref .icon-container:before{content:'';height:100%;display:inline-block;vertical-align:middle;}
.arthref .icon-container .centered{display:inline-block;padding:1em;vertical-align:middle;text-align:left;width:90%;max-width:725px;}
.arthref .icon-container ul{margin:0;padding:0;list-style-type:none;text-align:center;opacity:0;-webkit-transition:all 200ms ease-in-out;-moz-transition:all 200ms ease-in-out;-o-transition:all 200ms ease-in-out;-ms-transition:all 200ms ease-in-out;transition:all 200ms ease-in-out;pointer-events:none;}
.arthref .icon-container ul.active{opacity:1;pointer-events:auto;}
.arthref .icon-container ul li{display:inline-block;width:80px;height:110px;margin:10px;}
.arthref .icon-container ul li a{background-color:#617385;border-radius:10px;display:block;width:80px;height:80px;margin:0 0 10px 0;}
.arthref .icon-container ul li span{text-align:center;font-family:Arial;font-size:12px;font-weight:bold;text-shadow:0 2px 3px rgba(0,0,0,.9);color:#e5e5e5;font-style:normal !important;}
.arthref .icon-container ul li a.aApple span{background-position:0px 0px;}
.arthref .icon-container ul li a.aMySpace span{background-position:-80px 0px;}
.arthref .icon-container ul li a.aBlackBerry span{background-position:-160px 0px;}
.arthref .icon-container ul li a.aWikipedia span{background-position:-240px 0px;}
.arthref .icon-container ul li a.aEMail span{background-position:-320px 0px;}
.arthref .icon-container ul li a.aWordpress span{background-position:-400px 0px;}
.arthref .icon-container ul li a.aDeviantart span{background-position:-480px 0px;}
.arthref .icon-container ul li a.aForrst span{background-position:0px -80px;}
.arthref .icon-container ul li a.aTechnorati span{background-position:-80px;}
.arthref .icon-container ul li a.aXBox span{background-position:-160px -80px;}
.arthref .icon-container ul li a.aAndroid span{background-position:-240px -80px;}
.arthref .icon-container ul li a.aEvernote span{background-position:-320px -80px;}
.arthref .icon-container ul li a.aZerply span{background-position:-400px -80px;}
.arthref .icon-container ul li a.aXing span{background-position:-480px -80px;}
.arthref .icon-container ul li a.aVimeo span{background-position:0px -160px;}
.arthref .icon-container ul li a.aTumblr span{background-position:-80px -160px;}
.arthref .icon-container ul li a.aFacebook span{background-position:-160px;}
.arthref .icon-container ul li a.aDigg span{background-position:-240px -160px;}
.arthref .icon-container ul li a.aDelicious span{background-position:-320px -160px;}
.arthref .icon-container ul li a.aFriendFeed span{background-position:-400px -160px;}
.arthref .icon-container ul li a.aLinkedIn span{background-position:-480px -160px;}
.arthref .icon-container ul li a.aPaypal span{background-position:0px -240px;}
.arthref .icon-container ul li a.aBehance span{background-position:-80px -240px;}
.arthref .icon-container ul li a.aFoursquare span{background-position:-160px -240px;}
.arthref .icon-container ul li a.aWindows span{background-position:-240px;}
.arthref .icon-container ul li a.aSkype span{background-position:-320px -240px;}
.arthref .icon-container ul li a.aTwitter span{background-position:-400px -240px;}
.arthref .icon-container ul li a.aPosterous span{background-position:-480px -240px;}
.arthref .icon-container ul li a.aLastFm span{background-position:0px -320px;}
.arthref .icon-container ul li a.aQuora span{background-position:-80px -320px;}
.arthref .icon-container ul li a.aYouTube span{background-position:-160px -320px;}
.arthref .icon-container ul li a.aPinterest span{background-position:-240px -320px;}
.arthref .icon-container ul li a.aPath span{background-position:-320px;}
.arthref .icon-container ul li a.aGooglePlus span{background-position:-400px -320px;}
.arthref .icon-container ul li a.aFlud span{background-position:-480px -320px;}
.arthref .icon-container ul li a.aStumbleUpon span{background-position:0px -400px;}
.arthref .icon-container ul li a.aReddit span{background-position:-80px -400px;}
.arthref .icon-container ul li a.aRSS span{background-position:-160px -400px;}
.arthref .icon-container ul li a.aScoutzie span{background-position:-240px -400px;}
.arthref .icon-container ul li a.aBlogger span{background-position:-320px -400px;}
.arthref .icon-container ul li a.aGrovershark span{background-position:-400px;}
.arthref .icon-container ul li a.aAIM span{background-position:-480px -400px;}
.arthref .icon-container ul li a.aYahoo span{background-position:0px -480px;}
.arthref .icon-container ul li a.aFlickr span{background-position:-80px -480px;}
.arthref .icon-container ul li a.aDribbble span,.arthref .icon-container ul li a.aDribble span{background-position:-160px -480px;}
.arthref .icon-container ul li a.aInstagram span{background-position:-240px -480px;}
/* */
.arthref .icon-container ul li a.aApple{background-color:#272727;}
.arthref .icon-container ul li a.aMySpace{background-color:#272727;}
.arthref .icon-container ul li a.aBlackBerry{background-color:#2c2c2c;}
.arthref .icon-container ul li a.aWikipedia{background-color:#303030;}
.arthref .icon-container ul li a.aEMail{background-color:#434343;}
.arthref .icon-container ul li a.aWordpress{background-color:#444;}
.arthref .icon-container ul li a.aDeviantArt{background-color:#40504c;}
.arthref .icon-container ul li a.aForrst{background-color:#254619;}
.arthref .icon-container ul li a.aTechnorati{background-color:#48aa26;}
.arthref .icon-container ul li a.aXBox{background-color:#61a500;}
.arthref .icon-container ul li a.aAndroid{background-color:#8acd16;}
.arthref .icon-container ul li a.aEvernote{background-color:#78ba4e;}
.arthref .icon-container ul li a.aZerply{background-color:#99bd67;}
.arthref .icon-container ul li a.aXing{background-color:#036567;}
.arthref .icon-container ul li a.aVimeo{background-color:#627486;}
.arthref .icon-container ul li a.aTumblr{background-color:#365471;}
.arthref .icon-container ul li a.aFacebook{background-color:#3b5998;}
.arthref .icon-container ul li a.aDigg{background-color:#1b5891;}
.arthref .icon-container ul li a.aDelicious{background-color:#3274d1;}
.arthref .icon-container ul li a.aFriendFeed{background-color:#5e94d6;}
.arthref .icon-container ul li a.aLinkedIn{background-color:#2086bc;}
.arthref .icon-container ul li a.aPaypal{background-color:#478fda;}
.arthref .icon-container ul li a.aBehance{background-color:#0d8af8;}
.arthref .icon-container ul li a.aFoursquare{background-color:#17a4d7;}
.arthref .icon-container ul li a.aWindows{background-color:#22aee7;}
.arthref .icon-container ul li a.aSkype{background-color:#00aff0;}
.arthref .icon-container ul li a.aTwitter{background-color:#00b6f3;}
.arthref .icon-container ul li a.aPosterous{background-color:#8ab4cd;}
.arthref .icon-container ul li a.aLastFm{background-color:#b70300;}
.arthref .icon-container ul li a.aQuora{background-color:#c21d11;}
.arthref .icon-container ul li a.aYouTube{background-color:#c8312b;}
.arthref .icon-container ul li a.aPinterest{background-color:#cb2027;}
.arthref .icon-container ul li a.aPath{background-color:#bf3119;}
.arthref .icon-container ul li a.aGooglePlus{background-color:#cf4231;}
.arthref .icon-container ul li a.aFlud{background-color:#ff503e;}
.arthref .icon-container ul li a.aStumbleUpon{background-color:#eb4924;}
.arthref .icon-container ul li a.aReddit{background-color:#ff500f;}
.arthref .icon-container ul li a.aRSS{background-color:#ff7722;}
.arthref .icon-container ul li a.aScoutzie{background-color:#f87242;}
.arthref .icon-container ul li a.aBlogger{background-color:#fc9c4a;}
.arthref .icon-container ul li a.aGrovershark{background-color:#fca204;}
.arthref .icon-container ul li a.aAIM{background-color:#ffba00;}
.arthref .icon-container ul li a.aYahoo{background-color:#640e6b;}
.arthref .icon-container ul li a.aFlickr{background-color:#ff0084;}
.arthref .icon-container ul li a.aDribbble,.arthref .icon-container ul li a.aDribble{background-color:#ff0084;}
.arthref .icon-container ul li a.aInstagram{background-color:#723f2d;}
.arthref .icon-container ul li a span{display:block;width:80px;height:80px;background:url('social-sprite.png') no-repeat;}
.arthref .icon-container ul li a{background-image:-webkit-radial-gradient(center center,80px 80px,rgba(255,255,255,.15) 0%,rgba(0,0,0,.15) 100%);background-image:-moz-radial-gradient(center center,80px 80px,rgba(255,255,255,.15) 0%,rgba(0,0,0,.15) 100%);background-image:-o-radial-gradient(center center,80px 80px,rgba(255,255,255,.15) 0%,rgba(0,0,0,.15) 100%);background-image:-ms-radial-gradient(center center,80px 80px,rgba(255,255,255,.15) 0%,rgba(0,0,0,.15) 100%);background-image:radial-gradient(center center,80px 80px,rgba(255,255,255,.15) 0%,rgba(0,0,0,.15) 100%);}
.arthref .icon-container ul li:hover a{background-image:-webkit-radial-gradient(center center,80px 80px,rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%);background-image:-moz-radial-gradient(center center,80px 80px,rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%);background-image:-o-radial-gradient(center center,80px 80px,rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%);background-image:-ms-radial-gradient(center center,80px 80px,rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%);background-image:radial-gradient(center center,80px 80px,rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%);}
/* Animations */
.arthref .launchpad .icon-container ul{-webkit-transform-origin:center 20%;-webkit-transform:scale(0.8);-moz-transform-origin:center 20%;-moz-transform:scale(0.8);-o-transform-origin:center 20%;-o-transform:scale(0.8);-ms-transform-origin:center 20%;-ms-transform:scale(0.8);transform-origin:center 20%;transform:scale(0.8);}
.arthref .launchpad.active .icon-container ul{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
.arthref .launchpadReverse .icon-container ul{-webkit-transform-origin:center 20%;-webkit-transform:scale(1.2);-moz-transform-origin:center 20%;-moz-transform:scale(1.2);-o-transform-origin:center 20%;-o-transform:scale(1.2);-ms-transform-origin:center 20%;-ms-transform:scale(1.2);transform-origin:center 20%;transform:scale(1.2);}
.arthref .launchpadReverse.active .icon-container ul{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
.arthref .slideTop{top:-100%;}
.arthref .slideTop.active{top:0;}
.arthref .slideRight{left:100%;}
.arthref .slideRight.active{left:0;}
.arthref .slideBottom{top:100%;}
.arthref .slideBottom.active{top:0;}
.arthref .slideLeft{left:-100%;}
.arthref .slideLeft.active{left:0;}
.arthref .chain .icon-container ul li{opacity:0;}
.blurred{-webkit-transition:-webkit-filter 300ms ease-in-out;-moz-transition:-moz-filter 300ms ease-in-out;-o-transition:-o-filter 300ms ease-in-out;-ms-transition:-ms-filter 300ms ease-in-out;transition:filter 300ms ease-in-out;-webkit-filter:blur(15px);}
CSS代码(normalize.css):
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/* ========================================================================== HTML5 display definitions ========================================================================== */
/* * Corrects `block` display not defined in IE 8/9. */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}
/* * Corrects `inline-block` display not defined in IE 8/9. */
audio,canvas,video{display:inline-block;}
/* * Prevents modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */
audio:not([controls]){display:none;height:0;}
/* * Addresses styling for `hidden` attribute not present in IE 8/9. */
[hidden]{display:none;}
/* ========================================================================== Base ========================================================================== */
/* * 1. Sets default font family to sans-serif. * 2. Prevents iOS text size adjust after orientation change,without disabling * user zoom. */
html{font-family:sans-serif;/* 1 */
-webkit-text-size-adjust:100%;/* 2 */
-ms-text-size-adjust:100%;/* 2 */
}
/* * Removes default margin. */
body{margin:0;}
/* ========================================================================== Links ========================================================================== */
/* * Addresses `outline` inconsistency between Chrome and other browsers. */
a:focus{outline:thin dotted;}
/* * Improves readability when focused and also mouse hovered in all browsers. */
a:active,a:hover{outline:0;}
/* ========================================================================== Typography ========================================================================== */
/* * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,* Safari 5,and Chrome. */
h1{font-size:2em;}
/* * Addresses styling not present in IE 8/9,Safari 5,and Chrome. */
abbr[title]{border-bottom:1px dotted;}
/* * Addresses style set to `bolder` in Firefox 4+,Safari 5,and Chrome. */
b,strong{font-weight:bold;}
/* * Addresses styling not present in Safari 5 and Chrome. */
dfn{font-style:italic;}
/* * Addresses styling not present in IE 8/9. */
mark{background:#ff0;color:#000;}
/* * Corrects font family set oddly in Safari 5 and Chrome. */
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
/* * Improves readability of pre-formatted text in all browsers. */
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
/* * Sets consistent quote types. */
q{quotes:"\201C" "\201D" "\2018" "\2019";}
/* * Addresses inconsistent and variable font size in all browsers. */
small{font-size:80%;}
/* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
/* ========================================================================== Embedded content ========================================================================== */
/* * Removes border when inside `a` element in IE 8/9. */
img{border:0;}
/* * Corrects overflow displayed oddly in IE 9. */
svg:not(:root){overflow:hidden;}
/* ========================================================================== Figures ========================================================================== */
/* * Addresses margin not present in IE 8/9 and Safari 5. */
figure{margin:0;}
/* ========================================================================== Forms ========================================================================== */
/* * Define consistent border,margin,and padding. */
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
/* * 1. Corrects color not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend{border:0;/* 1 */
padding:0;/* 2 */
}
/* * 1. Corrects font family not being inherited in all browsers. * 2. Corrects font size not being inherited in all browsers. * 3. Addresses margins set differently in Firefox 4+,Safari 5,and Chrome */
button,input,select,textarea{font-family:inherit;/* 1 */
font-size:100%;/* 2 */
margin:0;/* 3 */
}
/* * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */
button,input{line-height:normal;}
/* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Corrects inability to style clickable `input` types in iOS. * 3. Improves usability and consistency of cursor style between image-type * `input` and others. */
button,html input[type="button"],/* 1 */
input[type="reset"],input[type="submit"]{-webkit-appearance:button;/* 2 */
cursor:pointer;/* 3 */
}
/* * Re-set default cursor for disabled elements. */
button[disabled],input[disabled]{cursor:default;}
/* * 1. Addresses box sizing set to `content-box` in IE 8/9. * 2. Removes excess padding in IE 8/9. */
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;/* 1 */
padding:0;/* 2 */
}
/* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */
input[type="search"]{-webkit-appearance:textfield;/* 1 */
-moz-box-sizing:content-box;-webkit-box-sizing:content-box;/* 2 */
box-sizing:content-box;}
/* * Removes inner padding and search cancel button in Safari 5 and Chrome * on OS X. */
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
/* * Removes inner padding and border in Firefox 4+. */
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
/* * 1. Removes default vertical scrollbar in IE 8/9. * 2. Improves readability and alignment in all browsers. */
textarea{overflow:auto;/* 1 */
vertical-align:top;/* 2 */
}
/* ========================================================================== Tables ========================================================================== */
/* * Remove most spacing between table cells. */
table{border-collapse:collapse;border-spacing:0;}