mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
commit
156e8f8831
@ -91,10 +91,10 @@ $(function () {
|
||||
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,"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,"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 () {
|
||||
@ -142,16 +142,17 @@ $(function () {
|
||||
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;
|
||||
var _x=-(e.pageX-$(this).width()/2)/40;//,_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});
|
||||
//if(_y>self.h*.04){
|
||||
// _y=self.h*.04
|
||||
//}
|
||||
T.set(self.imgBox,{scale:self.scale,transformPerspective:400});
|
||||
T.killTweensOf(self.imgBox,true);
|
||||
T.to(self.imgBox,.5,{x:_x,y:_y})
|
||||
//console.log(_x)
|
||||
T.to(self.imgBox,.5,{rotationY:_x/60,x:_x})
|
||||
})
|
||||
},
|
||||
endTween:function (){
|
||||
|
134
static/style.css
134
static/style.css
@ -310,8 +310,8 @@ header {
|
||||
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;
|
||||
transform-origin: center center;
|
||||
-webkit-transform-origin: center center;
|
||||
transition: opacity 0.5s ease-out;
|
||||
-webkit-transition: opacity 0.5s ease-out;
|
||||
}
|
||||
@ -355,7 +355,7 @@ header {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: auto;
|
||||
animation: loadTween 1.5S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
||||
animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
||||
|
||||
}
|
||||
.load-box span{
|
||||
@ -698,45 +698,49 @@ footer ul li > a {
|
||||
}
|
||||
|
||||
.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;
|
||||
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 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;
|
||||
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 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;
|
||||
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 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;
|
||||
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 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;
|
||||
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 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;
|
||||
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 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;
|
||||
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 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;
|
||||
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;
|
||||
}
|
||||
@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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: translate(0,0) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
@ -747,8 +751,12 @@ footer ul li > a {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
@ -758,8 +766,12 @@ footer ul li > a {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: translate(0,0) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
@ -770,8 +782,12 @@ footer ul li > a {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
@ -781,8 +797,12 @@ footer ul li > a {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: translate(0,0) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
@ -793,8 +813,12 @@ footer ul li > a {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
@ -804,8 +828,12 @@ footer ul li > a {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: translate(0,0) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
@ -816,8 +844,12 @@ footer ul li > a {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
@ -827,8 +859,12 @@ footer ul li > a {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: translate(0,0) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
@ -839,8 +875,12 @@ footer ul li > a {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
@ -851,8 +891,12 @@ footer ul li > a {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: translate(0,0) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
@ -863,8 +907,12 @@ footer ul li > a {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
@ -875,8 +923,12 @@ footer ul li > a {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: translateX(0px) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
@ -887,8 +939,12 @@ footer ul li > a {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0px) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
@ -899,8 +955,12 @@ footer ul li > a {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: translateX(0px) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
@ -911,8 +971,12 @@ footer ul li > a {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
80% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0px) rotate(0deg) scale(1, 1);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user