html图片铺底代码,梦幻西游底部师徒四人动态图

[html]代码库

梦幻西游

body{

background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/ft2_7b14393.webp);

}

.footer{

width: 760px;

height: 300px;

/* 背景颜色 */

margin: 400px auto;/* 外边距 上下 左右 */

}

.west{

float: left;/* 浮动 */

width: 190px;

height: 240px;

background-repeat: no-repeat;

background-position-y:center;

}

.west:nth-child(1){

background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/west_01_3ca39fe.png);

background-position-x: 0px;/* -1600px */

animation: move1 1.4s steps(8) infinite;

}

.west:nth-child(2){

background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/west_02_47bad19.png);

background-position-x: 0px;/* -1600px */

animation: move2 1.4s steps(8) infinite;

}

.west:nth-child(3){

background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/west_03_f962447.png);

background-position-x: 0px;/* -1600px */

animation: move3 1.4s steps(8) infinite;

}

.west:nth-child(4){

background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/west_04_6516d80.png);

background-position-x: 0px;/* -1600px */

animation: move4 1.4s steps(8) infinite;

}

@keyframes move1{

0%{

background-position-x: 0px;

}

100%{

background-position-x: -1600px;

}

}

@keyframes move2{

0%{

background-position-x: 0px;

}

100%{

background-position-x: -1600px;

}

}

@keyframes move3{

0%{

background-position-x: 0px;

}

100%{

background-position-x: -1360px;

}

}

@keyframes move4{

0%{

background-position-x: 0px;

}

100%{

background-position-x: -1660px;

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值