用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字

苏格拉底    -  云代码空间

—— 总之岁月漫长,然而值得等待

梦幻西游底部师徒四人动态图

2020-07-05|149阅||

摘要:分辨率自己调试,图片用的官网的可以直接用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梦幻西游</title>
<style>
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;
}
}
</style>
</head>
<body>
<div class="footer">
<div class="west"></div>
<div class="west"></div>
<div class="west"></div>
<div class="west"></div>
</body>
</html>

顶 0踩 0收藏
分享到:
更多
文章评论
    发表评论

    个人资料

    • 昵称: 苏格拉底
    • 等级: 初级程序员
    • 积分: 42
    • 代码: 1 个
    • 文章: 1 篇
    • 随想: 0 条
    • 访问: 0 次
    • 关注

    最新提问

      站长推荐