slamer4SKY
2018-07-08 01:38
采纳率: 100%
浏览 549
已采纳

怎么让背景的url跟着我设定的路线走

鱼的生成方式是在div的background里面,代码是网上找的:
#fish{
width: 174px;
height: 126px;
position: absolute;
left:0;
top:0;
background:url(image/fish8.png) no-repeat left top;
animation:active1 0.8s steps(8) infinite;

    }

@keyframes active1 {
0%{

        }
        100%{
            background-position: left -1008px;
        }
    }

现在鱼相当于一个背景,但我想让鱼跟我设定的路径x,y坐标来走,应该怎么实现

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • 天际的海浪 2018-07-10 08:47
    已采纳
     <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title> 页面名称 </title>
    <style type="text/css">
    #fish{
        width: 300px;
        height: 300px;
        position: absolute;
        left:0;
        top:0;
        background: url("https://avatar.csdn.net/5/6/7/3_jslang.jpg") no-repeat left top;
    }
    </style>
    </head>
    <body>
    <div id="fish"></div>
    <script type="text/javascript">
    var x = 0, y = 0;
    function move() {
        x++;
        y++;
        document.getElementById("fish").style.backgroundPosition = x+"px "+y+"px";
        if (x<280)
            setTimeout(move,10);
    }
    move();
    </script>
    </body>
    </html>
    
    
    点赞 打赏 评论
  • blownewbee 2018-07-08 02:59
    点赞 打赏 评论
  • 天际的海浪 2018-07-08 05:50
    #fish{
        width: 174px;
        height: 126px;
        position: absolute;
        left:0;
        top:0;
        overflow: hidden;
    }
    #fish:before{
        content: "";
        width: 100px;
        height: 100px;
        position: absolute;
        left:0;
        top:0;
        background: url(image/fish8.png) no-repeat left top;
        animation:active1 0.8s steps(8) infinite;
    }
    
    @keyframes active1 {
        0%{ top: 0px; }
        100%{ top: 100px; }
    }
    
    点赞 打赏 评论
  • qq_42536268 2018-07-08 06:15

    #fish:before{
    content: "";
    width: 100px;
    height: 100px;
    position: absolute;
    left:0;
    top:0;
    background: url(image/fish8.png) no-repeat left top;
    animation:active1 0.8s steps(8) infinite;
    }

    点赞 打赏 评论
  • 天际的海浪 2018-07-08 08:24

    是这样吗?

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title> 页面名称 </title>
    <style type="text/css">
    #fish{
        width: 300px;
        height: 300px;
        position: absolute;
        left:0;
        top:0;
        overflow: hidden;
    }
    #fish:before{
        content: "";
        width: 100px;
        height: 100px;
        position: absolute;
        left:0;
        top:0;
        background: url("https://avatar.csdn.net/5/6/7/3_jslang.jpg") no-repeat left top;
        animation:active1 0.8s steps(8) infinite;
    }
    
    @keyframes active1 {
        0%{ left: 0px; top: 0px; }
        100%{ left: 100px; top: 200px; }
    }
    </style>
    </head>
    <body>
    <div id="fish"></div>
    </body>
    </html>
    
    
    点赞 打赏 评论
  • qq_38179312 2018-07-08 08:28

    我有一个思路而已,毕竟我没学过这些
    像地图在移动一样让角色在地图的中间

    点赞 打赏 评论

相关推荐 更多相似问题