Question

我想知道是否有可能让我的游戏背景移动纯粹的CSS。我的目标是用html和css制作一个PURELY游戏。如果这是不可能的，那就这么说吧。这是我到目前为止的代码：

    <html>
<head>
<style>
@keyframes walkright {
    from { background-position: 0px; }
    to { background-position: -180px; }
}
@-webkit-keyframes walkright {
    from { background-position: 0px; }
    to { background-position: -180px; }
}
@keyframes walkleft {
    from { background-position: 0px; }
    to { background-position: 180px; }
}
@-webkit-keyframes walkleft {
    from { background-position: 0px; }
    to { background-position: 180px; }
}
#console{
    border: 2px solid black;
    height: 90%;
}
.character {
    width: 35px;
    height: 84px;
    background-image: url("standstill.png");
    margin: 0 auto;
    margin-left: 48%;
    margin-top: -15%;
    position: absolute;
}
.movebutton{
    width: 10%; 
    height: 5%; 
    border: 2px solid black; 
    line-height: .8; 
    position: relative;
}
.movebutton:hover{
    background-color: #00CC00;
}
#walkright:hover ~ .character{
    -webkit-animation: walkright .75s steps(5, end) infinite;
    animation: walkright .75s steps(5, end) infinite;
    background-image: url("walkingright.png");
}
#walkleft:hover ~ .character {
    -webkit-animation: walkleft .75s steps(5, end) infinite;
    animation: walkleft .75s steps(5, end) infinite;
    background-image: url("walkingleft.png");
}
</style>
</head>
<body>
<div style="position: absolute; margin-left: 39%; margin-top: -12%; border: 1px solid black; height: 15%; width: 20%;"></div>
<div class="movebutton" id="walkup" style="margin-left: 45.4%; margin-top: 15%;"><center>&uArr;</center></div>
<div class="movebutton" id="walkleft" style="float: left; margin-top: 0%; margin-left: 35%;"><center>&lArr;</center></div>
<div class="movebutton" id="walkdown" style="float: left; margin-top: 0%; border-radius: 5px;"><center><br/>O</center></div>
<div class="movebutton" id="walkright" style="float: left; margin-top: 0%;"><center>&rArr;</center></div>
<div class="character"></div>
</body>
</html>

对不起，我无法弄清楚如何把我的精灵表放进去。精灵表是让它向左移动，然后向右移动。它们工作正常，但正如我所说，我希望背景能够使精灵看起来移动。精灵静止做动画，但我希望背景来回移动。任何帮助都会很棒！谢谢！

CSS背景滚动

0 个答案: