mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
update page style
This commit is contained in:
afc163
parent
c3e404f6ea
commit
9985334e3c
@ -1,303 +0,0 @@
|
|||||||
$(function() {
|
|
||||||
var getTransform = function() {
|
|
||||||
var style = "transform",
|
|
||||||
anim = "animation",
|
|
||||||
pers = "perspective";
|
|
||||||
var i, prefix = ['webkit', 'moz', 'ms', 'o'],
|
|
||||||
htmlStyle = $("html")[0].style;
|
|
||||||
if (!"transform" in htmlStyle) {
|
|
||||||
for (i in prefix) {
|
|
||||||
style = "-" + prefix[i] + "-transform";
|
|
||||||
if (style in htmlStyle) break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!"animation" in htmlStyle) {
|
|
||||||
for (i in prefix) {
|
|
||||||
anim = "-" + prefix[i] + "-animation";
|
|
||||||
if (anim in htmlStyle) break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!"perspective" in htmlStyle) {
|
|
||||||
for (i in prefix) {
|
|
||||||
pers = "-" + prefix[i] + "-perspective";
|
|
||||||
if (pers in htmlStyle) break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [style, anim, pers]
|
|
||||||
};
|
|
||||||
var C = createjs || {},
|
|
||||||
T = TweenMax || {};
|
|
||||||
var bannerAnim = {
|
|
||||||
w: 2400,
|
|
||||||
h: 1300,
|
|
||||||
p_w: 0,
|
|
||||||
p_h: 0,
|
|
||||||
stage: null,
|
|
||||||
Canvas: null,
|
|
||||||
lineData:[
|
|
||||||
{x:270,y:795,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],w:70,h:70,rotate:-15,circ:{x:10,y:10,r:50}},
|
|
||||||
{x:850,y:220,w:70,h:70,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:{x:10,y:10,r:50}},
|
|
||||||
{x:930,y:445,w:230,h:110,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:20,y:15,r:80},{x:125,y:15,r:80}]},
|
|
||||||
{x:1160,y:670,w:440,h:115,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:[{x:60,y:15,r:80},{x:178,y:15,r:80},{x:308,y:15,r:80}]},
|
|
||||||
{x:1290,y:135,w:524,h:115,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:[{x:40,y:15,r:80},{x:165,y:15,r:80},{x:295,y:15,r:80},{x:415,y:15,r:80}]},
|
|
||||||
{x:1345,y:510,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}},
|
|
||||||
{x:1455,y:340,w:210,h:210,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:[{x:20,y:20,r:75},{x:120,y:20,r:75},{x:20,y:110,r:75},{x:120,y:110,r:75}]},
|
|
||||||
{x:1695,y:300,w:120,h:345,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:[{x:25,y:15,r:75},{x:35,y:25,r:55},{x:25,y:125,r:75},{x:35,y:135,r:55},{x:25,y:245,r:75},{x:35,y:255,r:55}]},
|
|
||||||
{x:1730,y:745,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}},
|
|
||||||
{x:1910,y:470,w:115,h:450,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:25,y:20,r:75},{x:35,y:30,r:55},{x:25,y:130,r:75},{x:35,y:140,r:55},{x:25,y:240,r:75},{x:35,y:250,r:55},{x:25,y:340,r:75},{x:35,y:350,r:55}]},
|
|
||||||
{x:1920,y:260,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}},
|
|
||||||
{x:2070,y:250,w:230,h:455,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:25,y:30,r:75},{x:35,y:40,r:55},{x:25,y:185,r:75},{x:35,y:195,r:55},{x:25,y:340,r:75},{x:35,y:350,r:55}, {x:140,y:30,r:75},{x:150,y:40,r:55},{x:140,y:185,r:75},{x:150,y:195,r:55},{x:140,y:340,r:75},{x:150,y:350,r:55}]},
|
|
||||||
],
|
|
||||||
init: function() {
|
|
||||||
var self = this;
|
|
||||||
self.box = $(".banner-box");
|
|
||||||
self.animBox = $("#bannerAnim");
|
|
||||||
self.imgBox = $(".banner-img");
|
|
||||||
self.txtBox = $(".banner-entry");
|
|
||||||
//创建canvas;
|
|
||||||
self.Canvas = $("<canvas id='myC' style='display:block'></canvas>").appendTo(self.animBox); //document.createElement('canvas');
|
|
||||||
self.Canvas[0].width = self.w;
|
|
||||||
self.Canvas[0].height = self.h;
|
|
||||||
self.stage = new C.Stage('myC');
|
|
||||||
|
|
||||||
C.Ticker.setFPS(30);
|
|
||||||
C.Ticker.useRAF = true;
|
|
||||||
C.Ticker.addEventListener("tick", self.stage);
|
|
||||||
C.Touch.enable(self.stage, true); //单指触摸
|
|
||||||
|
|
||||||
self.bannerResize();
|
|
||||||
$(window).bind("resize", self.bannerResize);
|
|
||||||
self.start()
|
|
||||||
},
|
|
||||||
bannerResize: function() {
|
|
||||||
var self = bannerAnim;
|
|
||||||
self.p_w = self.box.parent().width();
|
|
||||||
self.p_h = self.box.parent().height();
|
|
||||||
//获取比例；
|
|
||||||
var w_s = self.p_w / self.w + 0.08,
|
|
||||||
h_s = self.p_h / self.h + 0.08;
|
|
||||||
var scale = self.scale = w_s > h_s ? w_s : h_s;
|
|
||||||
var tra = getTransform()[0];
|
|
||||||
self.animBox.attr("style", "");
|
|
||||||
self.imgBox.attr("style", "");
|
|
||||||
var boxSty = {
|
|
||||||
"width": self.w,
|
|
||||||
"height": self.h
|
|
||||||
};
|
|
||||||
|
|
||||||
boxSty[tra] = "scale(" + scale + "," + scale + ")";
|
|
||||||
self.animBox.css(boxSty);
|
|
||||||
var imgSty = {};
|
|
||||||
imgSty[tra] = "scale(" + scale + "," + scale + ")";
|
|
||||||
self.imgBox.css(imgSty);
|
|
||||||
if (w_s > h_s) {
|
|
||||||
self.animBox.css({
|
|
||||||
"margin-top": (self.p_h - self.h * w_s) / 2,
|
|
||||||
"margin-left": (self.p_w - self.w * w_s) / 2
|
|
||||||
});
|
|
||||||
self.imgBox.css({
|
|
||||||
"margin-top": (self.p_h - self.h * w_s) / 2 - (1 - scale) * self.h / 2,
|
|
||||||
"margin-left": (self.p_w - self.w * w_s) / 2 - (1 - scale) * self.w / 2
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
self.animBox.css({
|
|
||||||
"margin-left": (self.p_w - self.w * h_s) / 2,
|
|
||||||
"margin-top": (self.p_h - self.h * h_s) / 2
|
|
||||||
});
|
|
||||||
self.imgBox.css({
|
|
||||||
"margin-left": (self.p_w - self.w * h_s) / 2 - (1 - scale) * self.w / 2,
|
|
||||||
"margin-top": (self.p_h - self.h * h_s) / 2 - (1 - scale) * self.h / 2
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
start: function() {
|
|
||||||
this.addLine();
|
|
||||||
},
|
|
||||||
glowLine: function(line, w, h, color) {
|
|
||||||
w = w || 0, h = h || 0;
|
|
||||||
var r = w / 2 || h / 2;
|
|
||||||
var glBox = new C.Container();
|
|
||||||
var Line = new C.Shape();
|
|
||||||
var glow = new C.Shape();
|
|
||||||
glBox.addChild(glow);
|
|
||||||
glBox.addChild(Line);
|
|
||||||
glow.alpha = .3;
|
|
||||||
var blurFilter = new C.BlurFilter(3, 3, 10);
|
|
||||||
glow.filters = [blurFilter];
|
|
||||||
var bounds = blurFilter.getBounds();
|
|
||||||
if (w) {
|
|
||||||
Line.graphics.ss(line, "round").rs(color, [0, 1], r, h, 0, r, h, r).mt(0, 0).lt(w, h);
|
|
||||||
glow.graphics.ss(line + 4, "round").rs(color, [0, 1], r, h, 0, r, h, r).mt(0, 0).lt(w, h);
|
|
||||||
glow.cache(bounds.x, bounds.y - 2, w + bounds.width, line + bounds.height);
|
|
||||||
} else {
|
|
||||||
Line.graphics.ss(line, "round").rs(color, [0, 1], w, r, 0, w, r, r).mt(0, 0).lt(w, h);
|
|
||||||
glow.graphics.ss(line + 4, "round").rs(color, [0, 1], w, r, 0, w, r, r).mt(0, 0).lt(w, h);
|
|
||||||
glow.cache(bounds.x - 2, bounds.y, line + bounds.width, h + bounds.height);
|
|
||||||
}
|
|
||||||
return glBox;
|
|
||||||
},
|
|
||||||
addMouseAnim: function() {
|
|
||||||
var self = this,
|
|
||||||
img_x = self.imgBox;
|
|
||||||
$("body").bind("mousemove", function(e) {
|
|
||||||
var _x = -(e.pageX - $(this).width() / 2) / 40; //,_y= -(e.pageY-$(this).height()/2)/35;
|
|
||||||
if (_x > self.w * .04) {
|
|
||||||
_x = self.w * .04
|
|
||||||
}
|
|
||||||
T.set(self.imgBox, {
|
|
||||||
scale: self.scale,
|
|
||||||
transformPerspective: 400
|
|
||||||
});
|
|
||||||
T.killTweensOf(self.imgBox, true);
|
|
||||||
var tobj = {};
|
|
||||||
if (navigator.userAgent.indexOf('Firefox') >= 0) {
|
|
||||||
tobj.x = _x
|
|
||||||
} else {
|
|
||||||
tobj.x = _x;
|
|
||||||
tobj.rotationY = _x / 60;
|
|
||||||
}
|
|
||||||
T.to(self.imgBox, .5, tobj);
|
|
||||||
})
|
|
||||||
},
|
|
||||||
endTween: function() {
|
|
||||||
var self = bannerAnim;
|
|
||||||
T.to(self.animBox, .5, {
|
|
||||||
alpha: 0,
|
|
||||||
onComplete: function() {
|
|
||||||
self.animBox.remove();
|
|
||||||
self.addMouseAnim()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
self.imgBox.removeClass("fn-alpha-out")
|
|
||||||
self.imgBox.css("opacity", 1);
|
|
||||||
|
|
||||||
},
|
|
||||||
textTween: function() {
|
|
||||||
var self = this;
|
|
||||||
self.txtBox.removeClass("fn-hide");
|
|
||||||
for (var i = 0; i < self.txtBox.children().length; i++) {
|
|
||||||
var mc = self.txtBox.children().eq(i);
|
|
||||||
T.from(mc, .5, {
|
|
||||||
delay: .15 * i,
|
|
||||||
alpha: 0,
|
|
||||||
y: "80",
|
|
||||||
onComplete: function(mc) {
|
|
||||||
mc.removeAttr("style");
|
|
||||||
},
|
|
||||||
onCompleteParams: [mc]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
addLine: function() {
|
|
||||||
var self = bannerAnim;
|
|
||||||
var a_lineBox = [],
|
|
||||||
end_num = 0;
|
|
||||||
setTimeout(function() {
|
|
||||||
self.textTween();
|
|
||||||
}, 500);
|
|
||||||
|
|
||||||
function addLine(i, j, lineBox) {
|
|
||||||
var t = new C.Shape();
|
|
||||||
if (j % 2) {
|
|
||||||
t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0, 0).lt(0, self.lineData[i].h);
|
|
||||||
var at = Math.floor(j / 2);
|
|
||||||
t.x = self.lineData[i].w * at
|
|
||||||
} else {
|
|
||||||
t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0, 0).lt(self.lineData[i].w, 0);
|
|
||||||
var at = j / 2;
|
|
||||||
t.y = self.lineData[i].h * at;
|
|
||||||
}
|
|
||||||
lineBox.addChild(t);
|
|
||||||
T.from(t, .5, {
|
|
||||||
alpha: 0
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function addCirc(i, lineBox) {
|
|
||||||
end_num++;
|
|
||||||
if (self.lineData[i].circ.length > 0) {
|
|
||||||
for (var j = 0; j < self.lineData[i].circ.length; j++) {
|
|
||||||
var circ = new C.Shape();
|
|
||||||
circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ[j].x + self.lineData[i].circ[j].r / 2, self.lineData[i].circ[j].y + self.lineData[i].circ[j].r / 2, self.lineData[i].circ[j].r / 2);
|
|
||||||
lineBox.addChild(circ);
|
|
||||||
T.from(circ, .5, {
|
|
||||||
alpha: 0
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
var circ = new C.Shape();
|
|
||||||
circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ.x + self.lineData[i].circ.r / 2, self.lineData[i].circ.y + self.lineData[i].circ.r / 2, self.lineData[i].circ.r / 2);
|
|
||||||
lineBox.addChild(circ);
|
|
||||||
T.from(circ, .5, {
|
|
||||||
alpha: 0
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (end_num >= self.lineData.length) {
|
|
||||||
setTimeout(self.endTween, 500)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function tween(line, obj, i, j, lineBox, arr) {
|
|
||||||
var t = obj;
|
|
||||||
t.alpha = 0;
|
|
||||||
t.scale = 2;
|
|
||||||
t.ease = Power1.easeOut;
|
|
||||||
T.to(line, .5, t);
|
|
||||||
addLine(i, j, lineBox);
|
|
||||||
arr.push(j);
|
|
||||||
a_lineBox[i] = arr;
|
|
||||||
if (a_lineBox[i].length >= 4) {
|
|
||||||
addCirc(i, lineBox)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (var i = 0; i < self.lineData.length; i++) {
|
|
||||||
var lineBox = new C.Container();
|
|
||||||
self.stage.addChild(lineBox);
|
|
||||||
lineBox.x = self.lineData[i].x;
|
|
||||||
lineBox.y = self.lineData[i].y + 125;
|
|
||||||
lineBox.rotation = self.lineData[i].rotate;
|
|
||||||
var arr = [];
|
|
||||||
//画外壳方形
|
|
||||||
for (var j = 0; j < 4; j++) {
|
|
||||||
var line, ma = Math.ceil(Math.random() * 2 - 1),
|
|
||||||
tweenobj;
|
|
||||||
if (j % 2) {
|
|
||||||
tweenobj = ma ? self.lineData[i].h * 2 : -self.lineData[i].h * 2;
|
|
||||||
line = self.glowLine(self.lineData[i].line, 0, self.lineData[i].h, self.lineData[i].color);
|
|
||||||
var t = Math.floor(j / 2);
|
|
||||||
line.x = self.lineData[i].w * t;
|
|
||||||
T.from(line, .5, {
|
|
||||||
alpha: 0,
|
|
||||||
y: tweenobj,
|
|
||||||
scale: 0,
|
|
||||||
delay: j * .1 + Math.random() * i * .1,
|
|
||||||
ease: Power1.easeIn,
|
|
||||||
onComplete: tween,
|
|
||||||
onCompleteParams: [line, {
|
|
||||||
y: -tweenobj
|
|
||||||
}, i, j, lineBox, arr]
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
tweenobj = ma ? self.lineData[i].w * 2 : -self.lineData[i].w * 2;
|
|
||||||
line = self.glowLine(self.lineData[i].line, self.lineData[i].w, 0, self.lineData[i].color);
|
|
||||||
var t = j / 2;
|
|
||||||
line.y = self.lineData[i].h * t;
|
|
||||||
T.from(line, .5, {
|
|
||||||
alpha: 0,
|
|
||||||
x: tweenobj,
|
|
||||||
scale: 0,
|
|
||||||
delay: j * .1 + Math.random() * i * .1,
|
|
||||||
ease: Power1.easeIn,
|
|
||||||
onComplete: tween,
|
|
||||||
onCompleteParams: [line, {
|
|
||||||
x: -tweenobj
|
|
||||||
}, i, j, lineBox, arr]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
lineBox.addChild(line)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
window.bannerAnim = bannerAnim;
|
|
||||||
});
|
|
||||||
@ -1,116 +0,0 @@
|
|||||||
/**
|
|
||||||
* Created by jljsj on 15/6/3.
|
|
||||||
*/
|
|
||||||
$(function() {
|
|
||||||
$.ajaxSetup({
|
|
||||||
cache: true
|
|
||||||
});
|
|
||||||
var loadData = [
|
|
||||||
"https://os.alipayobjects.com/rmsportal/PfhNcINWBAnMIWR.js", // easeljs-0.8.0.min.js
|
|
||||||
"https://os.alipayobjects.com/rmsportal/nGFyCGHAblMWsYE.js", // TweenMax.min.js
|
|
||||||
"/static/home.js",
|
|
||||||
"https://t.alipayobjects.com/images/T1CFtgXb0jXXXXXXXX.jpg"
|
|
||||||
];
|
|
||||||
var animEndStr = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
|
|
||||||
var loadFunc = {
|
|
||||||
init: function() {
|
|
||||||
var self = this;
|
|
||||||
self.body = $("body");
|
|
||||||
self.header = $("#header") || $("header");
|
|
||||||
self.main = $(".main");
|
|
||||||
self.footer = $("#footer") || $("footer");
|
|
||||||
self.addLoad()
|
|
||||||
},
|
|
||||||
addLoad: function() {
|
|
||||||
var self = this;
|
|
||||||
self.loadBox = $("<div class='load-main-box'>" +
|
|
||||||
"<div class='load-box'>" +
|
|
||||||
"<em><img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg' width='50' height='50'></em>" +
|
|
||||||
"<span>Ant Design</span>" +
|
|
||||||
"</div>" +
|
|
||||||
"<div class='load-bar'></div>" +
|
|
||||||
"</div>").appendTo(".banner-box");
|
|
||||||
self.loadBar = self.loadBox.find(".load-bar");
|
|
||||||
var loadText = self.loadBox.find("span"),
|
|
||||||
str = loadText.text(),
|
|
||||||
loadClass = ["yoyo-load0", "yoyo-load1", "yoyo-load2", "yoyo-load3", "yoyo-load4", "yoyo-load5"];
|
|
||||||
loadText.empty();
|
|
||||||
|
|
||||||
function c_random(num, arrlen) {
|
|
||||||
var arr = [];
|
|
||||||
|
|
||||||
function r(i) {
|
|
||||||
var t = Math.round(Math.random() * (num - 1));
|
|
||||||
if (t == arr[i - 1]) {
|
|
||||||
r(i);
|
|
||||||
return
|
|
||||||
}
|
|
||||||
arr.push(t)
|
|
||||||
}
|
|
||||||
for (var i = 0; i < arrlen; i++) {
|
|
||||||
r(i)
|
|
||||||
}
|
|
||||||
return arr;
|
|
||||||
}
|
|
||||||
var tarr = c_random(loadClass.length, str.length);
|
|
||||||
for (var i = 0; i < str.length; i++) {
|
|
||||||
var t = str[i];
|
|
||||||
if (t == " ") {
|
|
||||||
t = " "
|
|
||||||
}
|
|
||||||
var _class = "yoyo-x-left";
|
|
||||||
if (i > 0 && i < str.length - 1) {
|
|
||||||
_class = loadClass[tarr[i]]
|
|
||||||
}
|
|
||||||
if (i == str.length - 1) {
|
|
||||||
_class = 'yoyo-x-right'
|
|
||||||
}
|
|
||||||
loadText.append("<p class='" + _class + "'>" + t + "</p>")
|
|
||||||
}
|
|
||||||
self.load()
|
|
||||||
},
|
|
||||||
load: function() {
|
|
||||||
var self = this,
|
|
||||||
num = 0;
|
|
||||||
|
|
||||||
function endLoad() {
|
|
||||||
self.loadBox.addClass("load-out").one(animEndStr, function() {
|
|
||||||
self.loadBox.remove();
|
|
||||||
bannerAnim.init();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function getLoad() {
|
|
||||||
var str = loadData[num];
|
|
||||||
if (str.indexOf(".js") >= 0) {
|
|
||||||
$.getScript(str.indexOf('http') === 0 ? str : (rootUrl + str), function() {
|
|
||||||
num++;
|
|
||||||
self.loadBar.css("width", num / loadData.length * 100 + "%");
|
|
||||||
if (num >= loadData.length) {
|
|
||||||
setTimeout(endLoad, 300);
|
|
||||||
} else {
|
|
||||||
getLoad();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
var img = new Image();
|
|
||||||
img.onload = img.onerror = function() {
|
|
||||||
num++;
|
|
||||||
self.loadBar.css("width", num / loadData.length * 100 + "%");
|
|
||||||
if (num >= loadData.length) {
|
|
||||||
setTimeout(endLoad, 300);
|
|
||||||
} else {
|
|
||||||
getLoad();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
img.src = str;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
getLoad();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
$().ready(function() {
|
|
||||||
loadFunc.init()
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -6,6 +6,7 @@ InstantClickChangeFns.push(function() {
|
|||||||
}, 0);
|
}, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$('.component-demos .icon-all').off('click');
|
||||||
$('.component-demos .icon-all').on('click', function() {
|
$('.component-demos .icon-all').on('click', function() {
|
||||||
if ($(this).hasClass('expand')) {
|
if ($(this).hasClass('expand')) {
|
||||||
$(this).removeClass('expand');
|
$(this).removeClass('expand');
|
||||||
@ -49,6 +50,7 @@ InstantClickChangeFns.push(function() {
|
|||||||
hashChange();
|
hashChange();
|
||||||
|
|
||||||
// 高亮侧边演示菜单
|
// 高亮侧边演示菜单
|
||||||
|
$(window).off('hashchange');
|
||||||
$(window).on('hashchange', hashChange);
|
$(window).on('hashchange', hashChange);
|
||||||
|
|
||||||
// 移动 API 文档到演示下方
|
// 移动 API 文档到演示下方
|
||||||
@ -77,6 +79,7 @@ InstantClickChangeFns.push(function() {
|
|||||||
onScroll();
|
onScroll();
|
||||||
|
|
||||||
// 滚动高亮
|
// 滚动高亮
|
||||||
|
$(window).off('scroll');
|
||||||
$(window).on('scroll', onScroll);
|
$(window).on('scroll', onScroll);
|
||||||
|
|
||||||
// 添加上一页下一页
|
// 添加上一页下一页
|
||||||
|
|||||||
@ -40,7 +40,7 @@ li {
|
|||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #00ABEA;
|
color: #2db7f5;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: color .3s ease;
|
transition: color .3s ease;
|
||||||
}
|
}
|
||||||
@ -56,11 +56,11 @@ a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background: #4BB8FF;
|
background: #2db7f5;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
background: #4BB8FF;
|
background: #2db7f5;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -500,7 +500,7 @@ footer ul li > a {
|
|||||||
padding: 30px 80px 120px;
|
padding: 30px 80px 120px;
|
||||||
border-left: 1px solid #e9e9e9;
|
border-left: 1px solid #e9e9e9;
|
||||||
border-right: 1px solid #e9e9e9;
|
border-right: 1px solid #e9e9e9;
|
||||||
width: 80%;
|
width: 90%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -508,7 +508,7 @@ footer ul li > a {
|
|||||||
color: #666;
|
color: #666;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
width: 80%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.highlight {
|
.highlight {
|
||||||
@ -721,117 +721,6 @@ footer ul li > a {
|
|||||||
border-color: #2db7f5;
|
border-color: #2db7f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
/****************************动画样式*********************************/
|
|
||||||
.delay-mode {
|
|
||||||
animation-fill-mode: backwards !important;
|
|
||||||
-webkit-animation-fill-mode: backwards !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-delay {
|
|
||||||
animation-delay: 0s !important;
|
|
||||||
-webkit-animation-delay: 0s !important;
|
|
||||||
-moz-animation-delay: 0s !important;
|
|
||||||
-o-animation-delay: 0s !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.from-rotate-scale-m {
|
|
||||||
animation: mRotateScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
-webkit-animation: mRotateScale .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.from-rotate-scale-l {
|
|
||||||
animation: lRotateScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
-webkit-animation: lRotateScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.from-scale-l {
|
|
||||||
animation: lScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
-webkit-animation: lScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.from-scale-m {
|
|
||||||
animation: mScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
-webkit-animation: mScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.from-x-left {
|
|
||||||
animation: xLeft .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
-webkit-animation: xLeft .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.from-x-right {
|
|
||||||
animation: xRight .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
-webkit-animation: xRight .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.from-y-top {
|
|
||||||
animation: yTop .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
-webkit-animation: yTop .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.from-y-bottom {
|
|
||||||
animation: yBottom .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
-webkit-animation: yBottom .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.to-img-blur {
|
|
||||||
opacity: 0;
|
|
||||||
animation: toImgBlur .5s ease-out;
|
|
||||||
-webkit-animation: toImgBlur .5s ease-out;
|
|
||||||
-moz-animation: toImgBlur .5s ease-out;
|
|
||||||
-o-animation: toImgBlur .5s ease-out;
|
|
||||||
-ms-animation: toImgBlur .5s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.from-img-blur {
|
|
||||||
opacity: 1 !important;
|
|
||||||
animation: fromImgBlur .5s ease-out;
|
|
||||||
-webkit-animation: fromImgBlur .5s ease-out;
|
|
||||||
-moz-animation: fromImgBlur .5s ease-out;
|
|
||||||
-o-animation: fromImgBlur .5s ease-out;
|
|
||||||
-ms-animation: fromImgBlur .5s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alpha-out {
|
|
||||||
opacity: 0;
|
|
||||||
animation: alphaOut .5s ease-out;
|
|
||||||
-webkit-animation: alphaOut .5s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.yoyo-x-right{
|
|
||||||
animation: xRightMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
-webkit-animation: xRightMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
}
|
|
||||||
.yoyo-x-left{
|
|
||||||
animation: xLeftMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
-webkit-animation: xLeftMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
}
|
|
||||||
|
|
||||||
.yoyo-load0{
|
|
||||||
animation: Load0 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
-webkit-animation: Load0 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
}
|
|
||||||
.yoyo-load1{
|
|
||||||
animation: Load1 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
-webkit-animation: Load1 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
}
|
|
||||||
.yoyo-load2{
|
|
||||||
animation: Load2 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
-webkit-animation: Load2 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
}
|
|
||||||
.yoyo-load3{
|
|
||||||
animation: Load3 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
-webkit-animation: Load3 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
}
|
|
||||||
.yoyo-load4{
|
|
||||||
animation: Load4 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
-webkit-animation: Load4 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
}
|
|
||||||
.yoyo-load5{
|
|
||||||
animation: Load5 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
-webkit-animation: Load5 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* autocomplete */
|
/* autocomplete */
|
||||||
.ui-select ul {
|
.ui-select ul {
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -865,835 +754,6 @@ footer ul li > a {
|
|||||||
}
|
}
|
||||||
/* autocomplete end */
|
/* autocomplete end */
|
||||||
|
|
||||||
@keyframes Load5 {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(0,0) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes Load5 {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes Load4 {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(0,0) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes Load4 {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes Load3 {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(0,0) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes Load3 {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes Load2 {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(0,0) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes Load2 {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes Load1 {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(0,0) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes Load1 {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes Load0 {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(0,0) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes Load0 {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes xLeftMatrixR {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0px) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes xLeftMatrixR {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: translateX(0px) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes xRightMatrixR {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(50px) rotate(30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(50px) rotate(30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0px) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes xRightMatrixR {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translateX(50px) rotate(30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translateX(50px) rotate(30deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: translateX(0px) rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes fromImgBlur {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
filter: blur(15px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
filter: blur(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes fromImgBlur {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-filter: blur(15px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-filter: blur(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-moz-keyframes fromImgBlur {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-moz-filter: blur(15px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-moz-filter: blur(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-ms-keyframes fromImgBlur {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-ms-filter: blur(15px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-ms-filter: blur(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-o-keyframes fromImgBlur {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-o-filter: blur(15px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-o-filter: blur(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes toImgBlur {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
filter: blur(0px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
filter: blur(15px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes toImgBlur {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-filter: blur(0px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-filter: blur(15px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-moz-keyframes toImgBlur {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
-moz-filter: blur(0px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
-moz-filter: blur(15px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-ms-keyframes toImgBlur {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
-ms-filter: blur(0px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
-ms-filter: blur(15px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-o-keyframes toImgBlur {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
-o-filter: blur(0px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
-o-filter: blur(15px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes yBottom {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
margin-top: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes yBottom {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
margin-top: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes yTop {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
margin-top: -100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes yTop {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
margin-top: -100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes xRight {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
margin-left: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes xRight {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
margin-left: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes xLeft {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
margin-left: -100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes xLeft {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
margin-left: -100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes mScale {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes mScale {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: scale(0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes lScale {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes lScale {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes mRotateScale {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: rotate(90deg) scale(0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes mRotateScale {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: rotate(90deg) scale(0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes lRotateScale {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: rotate(90deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes lRotateScale {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: rotate(90deg) scale(1.5, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes RotaeX {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes RotaeX {
|
|
||||||
to {
|
|
||||||
-webkit-transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scaleOut {
|
|
||||||
0% {
|
|
||||||
transform: scale(1, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: scale(0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes scaleOut {
|
|
||||||
0% {
|
|
||||||
-webkit-transform: scale(1, 1);
|
|
||||||
;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
-webkit-transform: scale(0, 0);
|
|
||||||
;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes yTopMatrix {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes yTopMatrix {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translateY(-50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: translateY(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes yBottomMatrix {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes yBottomMatrix {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translateY(50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: translateY(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes xLeftMatrix {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes xLeftMatrix {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translateX(-50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: translateX(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes xRightMatrix {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes xRightMatrix {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translateX(50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: translateX(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes mainOut {
|
|
||||||
0% {
|
|
||||||
transform: rotateY(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: rotateY(90deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes mainOut {
|
|
||||||
0% {
|
|
||||||
-webkit-transform: rotateY(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
-webkit-transform: rotateY(90deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes alphaTo {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes alphaTo {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes alphaOut {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes alphaOut {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes rotateCircle {
|
|
||||||
0% {
|
|
||||||
-webkit-transform-origin: 50% 50%;
|
|
||||||
-webkit-transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
-webkit-transform-origin: 50% 50%;
|
|
||||||
-webkit-transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotateCircle {
|
|
||||||
0% {
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes rotateCircleBack {
|
|
||||||
0% {
|
|
||||||
-webkit-transform-origin: 50% 50%;
|
|
||||||
-webkit-transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
-webkit-transform-origin: 50% 50%;
|
|
||||||
-webkit-transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotateCircleBack {
|
|
||||||
0% {
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes loadTween {
|
|
||||||
0% {
|
|
||||||
transform: rotateY(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: rotateY(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: rotateX(-180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes loadTween {
|
|
||||||
0% {
|
|
||||||
-webkit-transform: rotateY(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
-webkit-transform: rotateY(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
-webkit-transform: rotateX(-180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/***************************************************************************/
|
/***************************************************************************/
|
||||||
.api-link {
|
.api-link {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@ -1745,7 +805,7 @@ footer ul li > a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.code-boxes-col-1-1 {
|
.code-boxes-col-1-1 {
|
||||||
width: 80%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.code-boxes-col-2-1 {
|
.code-boxes-col-2-1 {
|
||||||
|
|||||||
@ -164,7 +164,7 @@ module.exports = function(nico) {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
rootDirectoryIn: function(directory, rootDirectories) {
|
rootDirectoryIn: function(directory, rootDirectories) {
|
||||||
return rootDirectories.indexOf(directory.split('/')[0]) >= 0;
|
return rootDirectories.indexOf(getRootDirectory(directory)) >= 0;
|
||||||
},
|
},
|
||||||
removeCodeBoxIdPrefix: function(id) {
|
removeCodeBoxIdPrefix: function(id) {
|
||||||
return id.split('-').slice(2).join('-');
|
return id.split('-').slice(2).join('-');
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user