Question

我想从车轮 whee2 汽车和跟踪中删除 css 动画并使它们全部停止。目前我的轨道是在 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>

CSS 代码

*{
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);
}
}

JavaScript 代码

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

Answer 1

如果您想在点击时暂停滚轮动画，这可能会有所帮助：

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

Answer 2

先生，我已经这样做了，但是当我执行 console.log(tr) 时，它正在打印 null

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';
})

如何停止 CSS 旋转动画

2 个答案: