HTML5+CSS3+JavaScript 实现按键令小女孩移动，改变动画效果

本文链接：https://blog.csdn.net/qq_55786319/article/details/126717473

这篇博客介绍了如何使用HTML5、CSS3和JavaScript实现按键控制小女孩移动的逐帧动画效果。首先将小女孩图片居中显示，接着通过CSS3动画实现移动效果。然后，通过JavaScript监听键盘事件，根据按键改变小女孩的移动方向和速度。最后，处理键盘松开时停止动画并更新小女孩的朝向问题，优化代码以提高可维护性。

摘要由CSDN通过智能技术生成

素材图片
在这里插入图片描述

1.将小女孩图片截出来，在浏览器中居中显示，一个小女孩是96px

<body>
    <div class="box">
    </div>
</body>

        body{
   
            margin: 0;
        }
        .box{
   
            background-image: url(images/run.jpg);
            width: 96px;
            height: 96px;
            position: absolute;
            left:50%;
            top: 50%;
            /*仅仅是左上角那一点居中*/
            transform: translate(-50%,-50%);
            /*向x,y轴（左上）移动自身的百分之50*/
        }

在这里插入图片描述
2.然后实现小女孩移动的逐帧动画效果

动画就是从一个样式过渡到另一个样式，这里从坐标上可以看出来，从一个黄色框过渡到第二个，但是这样只是从图一平移到图四，并不能实现想要的逐帧动画效果。1个女孩是96px，四个女孩就是384px，animation-timing-function: steps(4);把384px分为四等分，动一次96px，所以background-position要从（0，0）到（0，-384）
在这里插入图片描述
编写动画效果

        @keyframes forward {
   
            from{
   
                background-position: 0 0;
            }
            to{
   
                background-position: -384px 0;
            }
        }
        @keyframes backward {
   
            from{
   
                background-position: 0 -288px;
            }
            to{
   
                background-position: -384px -288px;
            }
        }
        @keyframes turnleft {
   
            from{
   
                background-position: 0 -96px;
            }
            to{
   
                background-position: -384px -96px;
            }
        }
        @keyframes turnright {
   
            from{
   
                background-position: 0 -192px;
            }
            to{
   
                background-position: -384px -192px;
            }
        }

引用动画，在.box里添加代码

			animation-name: backward;/*供测试*/
            animation-duration:0.5s;
            animation-timing-function: steps(4);
            animation-iteration-count:infinite;

3.实现按下按键令小女孩改变移动方向
给小女孩绑定键盘按下事件，再根据键码判断上下左右来改变小女孩的朝向。添加js代码：

        let girl=document.querySelector('.box');
        document.onkeydown=function(event){
   
            switch(event.keyCode){
   
                //向上移动 backward
                case 87:case 38:
                    girl.style.animationName='backward';
                    break;
                //向下移动 forward
                case 83:case 40:
                    girl.style.animationName='forward';
                    break;
                //向左移动
                case 65:case 37:
                    girl.style.animationName='turnleft';
                    break;
                //向右移动
                case 68:case 39:
                    girl.style.animationName='turnright';
                    break