From f94b9be6c6fa192508f4ca2514f9f3e1dd92cff3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BD=97=E5=AE=AA?= Date: Thu, 4 Jun 2015 16:16:07 +0800 Subject: [PATCH] resolve conflict --- static/home.js | 111 ++++++++------- static/homeLoad.js | 108 ++++++++++++++ static/script.js | 1 - static/style.css | 271 ++++++++++++++++++++++++++++++++++-- theme/templates/layout.html | 8 +- 5 files changed, 426 insertions(+), 73 deletions(-) create mode 100644 static/homeLoad.js diff --git a/static/home.js b/static/home.js index 13b0d2be38..9230a1e35c 100644 --- a/static/home.js +++ b/static/home.js @@ -1,5 +1,4 @@ $(function () { - var animEndStr = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; var getTransform = function () { var style = "transform", anim = "animation", @@ -28,26 +27,25 @@ $(function () { }; var C=createjs||{},T=TweenMax||{}; var bannerAnim = { - w: 2185, - h: 1062, + w: 2400, + h: 1300, p_w: 0, p_h: 0, - img: "https://t.alipayobjects.com/images/T1URpfXeXtXXXXXXXX.jpg", stage: null, Canvas: null, lineData:[ - {x:225,y:785,line:3,color:"#BEC4C8",w:70,h:70,rotate:-19,circ:{x:10,y:10,r:50}}, - {x:870,y:245,w:70,h:70,line:3,color:"#BEC4C8",circ:{x:10,y:10,r:50}}, - {x:940,y:455,w:230,h:110,line:3,color:"#6EB4E0",circ:[{x:20,y:15,r:80},{x:125,y:15,r:80}]}, - {x:1160,y:670,w:410,h:110,line:3,color:"#F0776F",circ:[{x:60,y:15,r:80},{x:165,y:15,r:80},{x:285,y:15,r:80}]}, - {x:1285,y:170,w:484,h:110,line:3,color:"#BEC4C8",circ:[{x:30,y:15,r:80},{x:145,y:15,r:80},{x:265,y:15,r:80},{x:375,y:15,r:80}]}, - {x:1330,y:520,w:70,h:70,line:3,color:"#F0776F",circ:{x:10,y:10,r:50}}, - {x:1435,y:365,w:200,h:190,line:3,color:"#BEC4C8",circ:[{x:20,y:10,r:75},{x:110,y:10,r:75},{x:20,y:100,r:75},{x:110,y:100,r:75}]}, - {x:1655,y:325,w:115,h:320,line:3,color:"#F0776F",circ:[{x:25,y:15,r:75},{x:35,y:25,r:55},{x:25,y:115,r:75},{x:35,y:125,r:55},{x:25,y:225,r:75},{x:35,y:235,r:55}]}, - {x:1680,y:735,w:70,h:70,line:3,color:"#F0776F",circ:{x:10,y:10,r:50}}, - {x:1845,y:485,w:115,h:410,line:3,color:"#6EB4E0",circ:[{x:25,y:15,r:75},{x:35,y:25,r:55},{x:25,y:115,r:75},{x:35,y:125,r:55},{x:25,y:215,r:75},{x:35,y:225,r:55},{x:25,y:310,r:75},{x:35,y:320,r:55}]}, - {x:1865,y:290,w:70,h:70,line:3,color:"#F0776F",circ:{x:10,y:10,r:50}}, - {x:1995,y:280,w:230,h:420,line:3,color:"#6EB4E0",circ:[{x:25,y:30,r:75},{x:35,y:40,r:55},{x:25,y:175,r:75},{x:35,y:185,r:55},{x:25,y:310,r:75},{x:35,y:320,r:55}, {x:130,y:30,r:75},{x:140,y:40,r:55},{x:130,y:175,r:75},{x:140,y:185,r:55},{x:130,y:310,r:75},{x:140,y:320,r:55}]}, + {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; @@ -68,31 +66,16 @@ $(function () { self.bannerResize(); $(window).bind("resize", self.bannerResize); - - - self.loadImg(); - }, - loadImg: function () { - var self = this; - var loadBox = $("
" + - "
").appendTo(self.box); - var img = new Image(); - img.onload = function () { - loadBox.addClass("load-out").one(animEndStr, function () { - loadBox.remove(); - self.start(); - }); - }; - img.src = self.img; + 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, - h_s = self.p_h / self.h; - var scale = w_s > h_s ? w_s : h_s; + 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", ""); @@ -100,17 +83,18 @@ $(function () { "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); - self.imgBox.css("margin-top", (self.p_h - self.h * w_s) / 2); + 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,"margin-left":(self.p_w - self.w * w_s) / 2}); } else { - self.animBox.css("margin-left", (self.p_w - self.w * h_s) / 2); - self.imgBox.css("margin-left", (self.p_w - self.w * h_s) / 2); + 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,"margin-top": (self.p_h - self.h * h_s) / 2}); } }, start: function () { @@ -127,18 +111,18 @@ $(function () { var Line=new C.Shape(); var glow=new C.Shape(); glBox.addChild(glow); - glBox.addChild(Line); - glow.alpha=.3 + 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,"#2d2d2d"],[0,1],r,h,0,r,h,r).mt(0,0).lt(w,h); - glow.graphics.ss(line+4,"round").rs([color,"#2d2d2d"],[0,1],r,h,0,r,h,r).mt(0,0).lt(w,h); + 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,"#2d2d2d"],[0,1],w,r,0,w,r,r).mt(0,0).lt(w,h); - glow.graphics.ss(line+4,"round").rs([color,"#2d2d2d"],[0,1],w,r,0,w,r,r).mt(0,0).lt(w,h); + 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; @@ -155,14 +139,34 @@ $(function () { //T.from(colorMc,.6,{delay:.1*i,x:-self.w,alpha:0,ease:Power2.easeOut}) } },*/ + addMouseAnim:function (){ + var self=this,img_x=self.imgBox; + $("body").bind("mousemove",function (e){ + var _x=-(e.pageX-$(this).width()/2)/35,_y= -(e.pageY-$(this).height()/2)/35; + if(_x>self.w*.04){ + _x=self.w*.04 + } + if(_y>self.h*.04){ + _y=self.h*.04 + } + T.set(self.imgBox,{scale:self.scale}); + T.killTweensOf(self.imgBox,true); + T.to(self.imgBox,.5,{x:_x,y:_y}) + }) + }, endTween:function (){ var self=bannerAnim; T.to(self.animBox,.5,{alpha:0,onComplete:function (){ self.animBox.remove(); - self.textTween(); + self.addMouseAnim() }}); + self.imgBox.removeClass("fn-alpha-out") //T.to(self.imgBox,.5,{alpha:1}) - self.imgBox.css("opacity",1) + self.imgBox.css("opacity",1); + $("body").css("background","#fff").addClass("index-page"); + var header=$("#header")||$("header"),footer=$("#footer")||$("footer"); + header.removeAttr("style"); + footer.removeAttr("style") }, textTween:function (){ var self=this; @@ -177,14 +181,15 @@ $(function () { addLine:function (){ var self=bannerAnim; var a_lineBox=[],end_num=0; + self.textTween(); function addLine(i,j,lineBox){ var t=new C.Shape(); if(j%2){ - t.graphics.s(self.lineData[i].color).ss(self.lineData[i].line-2).mt(0,0).lt(0,self.lineData[i].h); + t.graphics.s(self.lineData[i].color).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).ss(self.lineData[i].line-2).mt(0,0).lt(self.lineData[i].w,0); + t.graphics.s(self.lineData[i].color).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; } @@ -196,14 +201,14 @@ $(function () { if(self.lineData[i].circ.length>0){ for(var j=0;j" + + "
" + + "" + + "Ant Design" + + "
" + + "
" + + "").appendTo(self.body); + 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;i0&&i"+t+"

") + } + self.load() + }, + load:function (){ + var self=this,lArr=[],num= 0,tNum=0; + function getJS(){ + for(var i=0;i=lArr.length){ + self.loadBox.addClass("load-out").one(animEndStr, function () { + self.loadBox.remove(); + $("").appendTo($("body")); + }); + }else{ + $("").appendTo($("body")); + } + tNum++; + self.loadBar.css("width",tNum/loadData.length*100+"%"); + } + } + for(var i=0;i= 0) { + lArr.push(str); + num++; + if (num >= loadData.length) { + setTimeout(getJS,500); + } + }else{ + var img = new Image(); + img.onload = img.onerror = function () { + num++; + tNum++; + self.loadBar.css("width",tNum/loadData.length*100+"%"); + if (num >= loadData.length) { + setTimeout(getJS,500); + } + }; + img.src = str; + } + } + } + }; + $().ready(function (){ + loadFunc.init() + }); + +}); \ No newline at end of file diff --git a/static/script.js b/static/script.js index 146197e88e..0878449501 100644 --- a/static/script.js +++ b/static/script.js @@ -22,7 +22,6 @@ $(function() { $('.code-boxes').on('click', '.collapse', function() { var highlightBox = $(this).parent().parent().find('.highlight'); - console.log(highlightBox.is(':visible')); highlightBox.animate({ height: highlightBox.is(':visible') ? 'hide' : 'show', opacity: highlightBox.is(':visible') ? 0 : 1 diff --git a/static/style.css b/static/style.css index 29127c5672..f43291f0b5 100644 --- a/static/style.css +++ b/static/style.css @@ -61,6 +61,9 @@ body { line-height: 1.5; color: #888; font-size: 14px; + background: #fff; + transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1); + -webkit-transition:background 1s cubic-bezier(0.075, 0.82, 0.165, 1) ; } *, @@ -290,7 +293,6 @@ header { min-height: 500px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out; - transition: transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out; } .banner-box { @@ -303,11 +305,13 @@ header { } .banner-box .banner-img { - background: url("https://t.alipayobjects.com/images/T1URpfXeXtXXXXXXXX.jpg") center no-repeat; - height: 1062px; - width: 2185px; + background: url("https://t.alipayobjects.com/images/T1CFtgXb0jXXXXXXXX.jpg") center no-repeat; + height: 1300px; + width: 2400px; transform-origin: 0 0; -webkit-transform-origin: 0 0; + transition: opacity 0.5s ease-out; + -webkit-transition: opacity 0.5s ease-out; } .banner-box #bannerAnim, @@ -318,22 +322,26 @@ header { transform-origin: 0 0; -webkit-transform-origin: 0 0; z-index: 2; - background: #2d2d2d + top:0; + left:0; } .load-box { -webkit-perspective: 300px; -moz-perspective: 300px; - width: 50px; - height: 50px; + width: 140px; + height: 80px; position: absolute; top: 50%; left: 50%; - margin-left: -25px; - margin-top: -25px; + margin-left: -70px; + margin-top: -40px; z-index: 99; animation: alphaTo .3s ease-out; -webkit-animation: alphaTo .3s ease-out; + font-size: 22px; + text-align: center; + font-family: 'Raleway', sans-serif;; } .load-box em { @@ -344,12 +352,26 @@ header { display: block; width: 50px; height: 50px; - animation: loadTween 1S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; -} + margin: auto; + animation: loadTween 1.5S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; +} +.load-box span{ + display: inline-block; +} +.load-box span>p{ + float: left; +} +.load-main-box .load-bar{ + width: 0%; + height: 3px; + background: #6EB4E0; + transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86); + -webkit-transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);; +} .load-out { - -webkit-animation: alphaOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045); - animation: alphaOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045); + -webkit-animation: alphaOut 1s cubic-bezier(0.6, -0.28, 0.735, 0.045); + animation: alphaOut 1s cubic-bezier(0.6, -0.28, 0.735, 0.045); } .banner-box #bannerAnim .banner-line-absolute { @@ -595,6 +617,7 @@ footer ul li > a { } } +/****************************动画样式*********************************/ .delay-mode { animation-fill-mode: backwards !important; -webkit-animation-fill-mode: backwards !important; @@ -671,6 +694,226 @@ footer ul li > a { -webkit-animation: alphaOut .5s ease-out; } +.yoyo-x-right{ + animation: xRightMatrixR 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; + -webkit-animation: xRightMatrixR 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; +} +.yoyo-x-left{ + animation: xLeftMatrixR 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; + -webkit-animation: xLeftMatrixR 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; +} + +.yoyo-load0{ + animation: Load0 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; + -webkit-animation: Load0 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; +} +.yoyo-load1{ + animation: Load1 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; + -webkit-animation: Load1 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; +} +.yoyo-load2{ + animation: Load2 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; + -webkit-animation: Load2 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; +} +.yoyo-load3{ + animation: Load3 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; + -webkit-animation: Load3 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; +} +.yoyo-load4{ + animation: Load4 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; + -webkit-animation: Load4 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; +} +.yoyo-load5{ + animation: Load5 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; + -webkit-animation: Load5 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; +} +@keyframes Load5 { + 0% { + opacity: 0; + transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); + } + + 100% { + 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); + } + + 100% { + 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); + } + + 100% { + 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); + } + + 100% { + 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); + } + + 100% { + 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); + } + + 100% { + 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); + } + + 100% { + 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); + } + + 100% { + 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); + } + + 100% { + 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); + } + + 100% { + 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); + } + + 100% { + 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); + } + + 100% { + 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); + } + + 100% { + 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); + } + + 100% { + 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); + } + + 100% { + 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); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0px) rotate(0deg) scale(1, 1); + } +} @keyframes fromImgBlur { 0% { opacity: 0; @@ -1224,7 +1467,7 @@ footer ul li > a { -webkit-transform: rotateX(-180deg); } } - +/***************************************************************************/ .index-page .nav { -webkit-animation: yTopMatrix .5s ease-out .5s backwards; animation: yTopMatrix .5s ease-out .5s backwards; diff --git a/theme/templates/layout.html b/theme/templates/layout.html index 8a955682c4..dfc059feac 100644 --- a/theme/templates/layout.html +++ b/theme/templates/layout.html @@ -18,7 +18,7 @@ - +