如何在html中的任何位置启动animaton



我的角色应该从任何一点向右和向左移动,但当我点击动画按钮时,角色会传送回起点,并且不会从按下按钮时他停留的点开始向右或向左移动https://youtu.be/clSaW9MRpSM视频

body{
background-color: lightblue;
}
.player{
height: 50px;
width: 50px;
position: relative;
top: 450px;

}
.block{
height: 30px;
width: 30px;
position: relative;
top: -50px;
left: 400px;
animation: block 1s infinite linear;
}
#game{
width: 500px;
height: 500px;
border: 2px solid black;
}
@keyframes block{
0%{top: -50;}
100%{top: 420;}
}

@keyframes gor{
0%{left: 0px;}
50%{left: 450px;}
100%{left: 0px;}
}
@keyframes gol{
0%{right: 450px;}
50%{right: 0px;}
100%{right: 450px;}
}
.animater{
animation: gor 1s ;
position: relative;
}
.animatel{
animation: gol 1s ;
position: relative ;
}
js代码
var player = document.getElementById("player");
var block = document.getElementById("block");

function goleft(argument){
player.classList.add("animatel");
setTimeout(function(){
player.classList.remove("animatel");
},1);
console.log("left");
}
function goright(argument){
player.classList.add("animater");
console.log("right");
}

相关内容

最新更新