{
margin: 0;
padding: 0;
}
body{
background: #000000;
overflow: hidden;
}
.container1{
width: 1300px;
position: relative;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1300px;
perspective: 1300px;
}
.dl img,.dll img,.dlll img{
transform: rotateX(-180deg) rotateZ(90deg);
}
.dl{
width: 75px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 1s;
position: relative;
transform: rotateX(-10deg) rotateY(0deg);
-webkit-transform: rotateX(-10deg) rotateY(0deg);
margin: 100px auto;
animation: zd step-end 1s;
}
.dll{
width: 125px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 1s;
position: relative;
transform: rotateX(-10deg) rotateY(0deg);
-webkit-transform: rotateX(-10deg) rotateY(0deg);
margin: 100px auto;
animation: zd step-end 1s;
}
.dlll{
width: 200px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 1s;
position: relative;
transform: rotateX(-10deg) rotateY(0deg);
-webkit-transform: rotateX(-10deg) rotateY(0deg);
margin: 50px auto;
animation: zd step-end 1s;
}
@keyframes zd{
from{ transform: scale(0);}
to{ transform: scale(1);}
}
.dlll img{
width: 200px;
height: 400px;
position: absolute;
opacity: 0;
transition: all 3s ease-in-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
/transform: rotateY(-20deg);/
left: 0;
top: 0;
}
.dll img{
width: 125px;
height: 200px;
position: absolute;
opacity: 0;
transition: all 3s ease-in-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
/transform: rotateY(-20deg);/
left: 0px;
top: 0;
}
.dl img{
width: 75px;
height: 100px;
position: absolute;
opacity: 1;
transition: all 3s ease-in-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
/transform: rotateY(-20deg);*/
left: 0px;
top: 0;
}
.dl-2 img{
top: 100px;
}
.dl-3 img{
top: 200px;
}
.dl-4 img{
top: 300px;
}
.dll-2 img{
top: 200px;
}
.lz{
position: absolute;
top: 180px;
margin: 0px auto;
width: 20px;
height: 40px;
background: -webkit-linear-gradient(#CC3333,#FF6666,#FFCCCC );
position: relative;
}
.hy{
border-radius: 100%;
position: absolute;
top: -40px;
left: 50%;
margin-left: -10px;
width: 20px;
height: 40px;
}
.hy:nth-child(1) {
-webkit-animation: hy 2s infinite;
animation: hy 2s infinite;
}
.hy:nth-child(2) {
-webkit-animation: hy 1.5s infinite;
animation: hy 1.5s infinite;
}
.hy:nth-child(3) {
-webkit-animation: hy 1.5s infinite;
animation: hy 1s infinite;
}
.hy:nth-child(4) {
-webkit-animation: hy 1.5s infinite;
animation: hy .5s infinite;
}
.hy:nth-child(5) {
-webkit-animation: hy 1.5s infinite;
animation: hy .2s infinite;
}
@keyframes hy{
0%, 100% {
background: rgba(254, 248, 97, 0.5);
-webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
-webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
-webkit-transform: translateY(-20px) scale(0);
transform: translateY(-20px) scale(0);
}
}
.ig{
position: relative;
}
.ig img{
position: absolute;
width: 50px;
height: 50px;
top: -300px;
animation: xh 3s linear infinite;
}
@keyframes xh{
from{
top:-300px;
transform: rotateZ(0deg);
}
to{
top:450px;
transform: rotateZ(360deg);
}
} snowFlow img{
width: 50px;
height: 50px;
}
@keyframes mysnow{
0% { bottom: 100%; opacity: 0; }
50% { opacity: 1; transform: rotateZ(720deg) rotateX(720deg) rotateY(720deg);}
100% { transform: rotateZ(0deg); opacity: 0; bottom: 0%;} }
.container { position: fixed; }
.pic { position: absolute; opacity: 0; animation: mysnow 5s;height: 90px; }
