Javascript 如何停止CSS旋转动画_Javascript_Html_Css

Javascript 如何停止CSS旋转动画

javascript html css

Javascript 如何停止CSS旋转动画,javascript,html,css,Javascript,Html,Css,我想删除css动画从车轮whee2汽车和轨道，使他们都停止。目前，我的轨迹在x方向上平移，车轮在自己的轴上旋转简单地说，我想在单击某个位置时删除关键帧，为此，我可以使用onclick属性制作一个按钮，但这对我帮助不够 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http

我想删除css动画从车轮whee2汽车和轨道，使他们都停止。目前，我的轨迹在x方向上平移，车轮在自己的轴上旋转

简单地说，我想在单击某个位置时删除关键帧，为此，我可以使用onclick属性制作一个按钮，但这对我帮助不够

HTML代码

 <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Car Animation and Javascript</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
 <body>
 <div class="container">
    <div class="sky">
        <div class="trees">

        </div>
        <div class="track">

        </div>
        <div class="car">
            <div class="wheel wheel1">
                <img src="car_wheel_left.png" alt="">
            </div>
            <div class="wheel wheel2">
                <img src="car_wheel_right.png" alt="">
            </div>
        </div>
        
      </div>
   </div>
</body>
</html>

*{
margin: 0;
padding: 0;
}

.sky{
height: 100%;
width: 100%;
background-image: url(background.jpg);
background-repeat: no-repeat;
position: absolute;
}
body{
overflow: hidden;
animation:shakeBody  linear 6s infinite;
}
.trees{
height: 100vh;
width: 100%;
background-size: cover;
background-image: url(trees.png);
background-repeat: no-repeat;
position: absolute;
top: -174px;
}
.track{
height: 30vh;
width: 800vw;
background-image: url(track.png);
background-repeat: repeat-x;
position: absolute;
top: 70vh;
animation: carMove linear 6s infinite;
}
.car{
height: 100px;
width: 319px;
background-image: url(car_body.png);
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top: 66vh;
left: 75vh;
animation:shake  linear 6s infinite;
}
.wheel1 img{
width: 77px;
position: relative;
top: 39px;
left: 39px;
animation: wheelRotation linear .6s infinite;
}
.wheel2 img{
width: 77px;
position: relative;
top: -42px;
left: 215px;
animation: wheelRotation linear .6s infinite;
}
@keyframes wheelRotation{
100%{
    transform: rotate(360deg);
}
}
@keyframes carMove{
100%{
    transform: translateX(-500vw);
}
}

@keyframes shake{
0%{
    transform: translateY(-5px);
}
50%{
    transform: translateY(5px);
}
100%{
    transform: translateY(-5px);
}
}
@keyframes shakeBody{
0%{
    transform: translateY(-2px);
}
50%{
    transform: translateY(2px);
}
100%{
    transform: translateY(-2px);
}
}

var audio=document.createElement('audio')
audio.setAttribute('src','sound.mp3')
audio.loop=true;
audio.play();

JavaScript代码

 <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Car Animation and Javascript</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
 <body>
 <div class="container">
    <div class="sky">
        <div class="trees">

        </div>
        <div class="track">

        </div>
        <div class="car">
            <div class="wheel wheel1">
                <img src="car_wheel_left.png" alt="">
            </div>
            <div class="wheel wheel2">
                <img src="car_wheel_right.png" alt="">
            </div>
        </div>
        
      </div>
   </div>
</body>
</html>

*{
margin: 0;
padding: 0;
}

.sky{
height: 100%;
width: 100%;
background-image: url(background.jpg);
background-repeat: no-repeat;
position: absolute;
}
body{
overflow: hidden;
animation:shakeBody  linear 6s infinite;
}
.trees{
height: 100vh;
width: 100%;
background-size: cover;
background-image: url(trees.png);
background-repeat: no-repeat;
position: absolute;
top: -174px;
}
.track{
height: 30vh;
width: 800vw;
background-image: url(track.png);
background-repeat: repeat-x;
position: absolute;
top: 70vh;
animation: carMove linear 6s infinite;
}
.car{
height: 100px;
width: 319px;
background-image: url(car_body.png);
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top: 66vh;
left: 75vh;
animation:shake  linear 6s infinite;
}
.wheel1 img{
width: 77px;
position: relative;
top: 39px;
left: 39px;
animation: wheelRotation linear .6s infinite;
}
.wheel2 img{
width: 77px;
position: relative;
top: -42px;
left: 215px;
animation: wheelRotation linear .6s infinite;
}
@keyframes wheelRotation{
100%{
    transform: rotate(360deg);
}
}
@keyframes carMove{
100%{
    transform: translateX(-500vw);
}
}

@keyframes shake{
0%{
    transform: translateY(-5px);
}
50%{
    transform: translateY(5px);
}
100%{
    transform: translateY(-5px);
}
}
@keyframes shakeBody{
0%{
    transform: translateY(-2px);
}
50%{
    transform: translateY(2px);
}
100%{
    transform: translateY(-2px);
}
}

var audio=document.createElement('audio')
audio.setAttribute('src','sound.mp3')
audio.loop=true;
audio.play();

如果要在单击时暂停控制盘动画，这可能会有所帮助：

let wheels = document.getElementsByClassName('wheel');
document.addEventListener('click', () => {
  wheels[0].style.animationPlayState = 'paused';
  wheels[1].style.animationPlayState = 'paused';
})

先生，我已经这样做了，但是当我在做console.log（tr）时，它打印为空

let wheels = document.getElementsByTagName('img');
let tr =     document.getElementsByClassName('track');
let cr= document.getElementsByClassName(".car")
document.addEventListener('click', () => {
console.log(tr);
console.log(cr);
wheels[0].style.animationPlayState='paused';
wheels[1].style.animationPlayState='paused';
})

你发布的内容不足以重做，这意味着有

的机会有人可以回答你的问题。请提供答案，以便我们能够理解您的要求。基本上，我们缺少图像。您可以将它们上载到某个位置并使用这些链接，也可以使用codesandbox.io（或类似工具）创建多文件片段。如果要停止动画制作，请从car元素中删除带有动画的类，如果要继续动画制作，请将其添加。如果您已获取代码并要求对其进行修改，但是你没有自己尝试去达到预期的结果。这是违反准则的。它转化为请求免费编码服务，这在这里是离题的，原因很明显。请至少做出一次体面的尝试来达到预期的结果。我投票结束这个问题，因为这是一个修改开源代码的请求，而不需要询问者进行任何研究或编码工作。在目前的形式下，这是一个由没有表现出任何编码能力或意图的人提出的问题，这使得他们的问题脱离了主题。先生，我是一个学习者，相信我，我已经尝试过了