京东首页的html,京东首页HTML5+CSS3

.user{ background-image: url(//img10.360buyimg.com/imgzone/jfs/t16756/150/1439611189/700442/dfcd1a1f/5ac9a419N3cb68899.jpg); background-repeat:no-repeat; width:1920px; height:1240px;

}

.user_01{ height:626px; width:975px; margin: 0px 510px;

position:relative;

animation:mymove infinite;

animation-duration:3s;

animation-direction:alternate;

/* Safari and Chrome */

-webkit-animation:mymove infinite;

-webkit-animation-duration:3s;

-webkit-animation-direction:alternate;

}

@keyframes mymove

{

from {top:0px;}

to {top:60px;}

}

@-webkit-keyframes mymove /* Safari and Chrome */

{

from {top:0px;}

to {top:60px;}

}

.user_02{ height:229px; width:193px; margin-top:-150px;

position:relative;

animation:mydonghua 5s infinite ;

animation-timing-function:linear;

animation-direction:alternate;

/* Safari and Chrome */

-webkit-animation:mydonghua 5s infinite;

-webkit-animation-timing-function:linear;/* 从开始到结束以相同的速度播放动画:*/

-webkit-animation-direction:alternate;

-ms-animation-direction:alternate;

-moz-animation-direction:alternate;

}

@keyframes mydonghua

{

from {left:0px;}

to {left:400px;}

}

@-webkit-keyframes mydonghua /* Safari and Chrome */

{

from {left:0px;}

to {left:400px;}

}

.user_03{ height:378px; width:428px; position:relative; top:158px; left:-20px;

animation: liujunze  3s linear 0s infinite alternate;

-ms-animation: liujunze  3s linear 0s infinite alternate;

-moz-animation: liujunze 3s linear 0s infinite alternate;

-webkit-animation: liujunze  3s linear 0s infinite alternate;

}

@keyframes liujunze  {

0%{transform:rotate(0deg);

opacity:1;

transform-origin:left bottom;

}

100%{transform:rotate(5deg);

opacity:1;

transform-origin:left bottom;

}

}

.user_04{ height:584px; width:548px; position: absolute; top:810px; left:1376px;

animation: liujunze01  3s linear 0s infinite alternate;

-ms-animation: liujunze01  3s linear 0s infinite alternate;

-moz-animation: liujunze01 3s linear 0s infinite alternate;

-webkit-animation: liujunze01  3s linear 0s infinite alternate;

}

@keyframes liujunze01  {

0%{transform:rotate(0deg);

opacity:1;

transform-origin:right bottom;

}

100%{transform:rotate(-5deg);

opacity:1;

transform-origin: right bottom;

}

}