使用 HTML 和 CSS 设计一个正在运行的汽车动画

项目介绍：在这个项目中，我们将使用带有音效的 HTML 和 CSS 实现一辆在轨道上运行的汽车。该项目的先决条件是HTML、CSS和JavaScript。

文件结构：

• 索引.html
• 样式文件
• 脚本.js

HTML 代码：在下面的代码中，我们以覆盖整个网页的方式放置了天空 div。之后，树、轨道、汽车被放置在天空上，最后，车轮安装在汽车上，使它们可以旋转，我们可以为正在运行的汽车创建动画。我们已经使用文件style.css 添加了样式 并应用来自script.js的音效。

HTML

    
    
    Lamborghini car animation
    
    


    
        
        
        
        
        
    

style.css：以下是上述HTML代码中使用的文件“style.css”的代码。

/* CSS Reset */
*{
    margin: 0;
    padding: 0;
}

/* Sky Styling */
.sky {
    width: 100vw;
    height: 100vh;
    background-image: url(sky.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
}

/* Tree Styling and positioning */
.tree {
    height: 100vh;
    background-image: url(tree-removebg-preview\ \(1\).png);
    background-repeat:no-repeat;
    background-size: cover;
}

/* Track Styling and positioning */
.track {
    background-image: url(track.jpeg);
    background-repeat: repeat-x;
    position: absolute;
    bottom: 0px;
    width: 1000vw;
    height: 20vh;
    animation: trackanimation 6s linear infinite;
}

/* Car Styling and positioning */
.car {
    background-image: url(car-removebg-preview.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 17rem;
    height: 4.699rem;
    position: absolute;
    bottom: 77px;
    left: 396px;
}

/* Wheel's Styling and positioning */
.wheel {
    position: absolute;
    animation: wheelanimation linear .6s infinite;
}
.wheel1 {
    background-image: url(wheel1-removebg-preview.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 46px;
    height: 49px;
    bottom: 71px;
    left: 570px;
}
.wheel2 {
    background-image: url(wheel2-removebg-preview.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 43px;
    height: 44px;
    bottom: 77px;
    left: 433px;
}

/* Rotation of the wheels */
@keyframes wheelanimation{
    100% {
        transform: rotate(360deg);
    }
}

/* Moving the track backwards */
@keyframes trackanimation {
    100% {
        transform: translate(-500vw);
    }
}

解释：

• 天空：我们放置的天空覆盖了整个视口 通过为其分配 100vw 和100vh ，我们将位置设置为absolute 。
• 树：我们通过使用 position: absolute来定位树，使其占据网页的底部 财产。
• track：我们已将轨道定位到网页底部，并在 x 方向重复轨道，使其始终在动画中保持可见。出于同样的目的，我们也为轨道分配了一个非常大的宽度。现在，应用于轨道的动画向后移动轨道，使汽车看起来在移动。
• 汽车，车轮：我们首先将汽车及其车轮定位到所需的位置，然后通过对上面的代码应用适当的动画来使车轮旋转。

script.js：以下是上述HTML文件中使用的script.js文件的代码。该文件基本上用于应用所需的声音效果。

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

输出：

源码链接： https://github.com/SAEb-ai/Racing-Car-Animation

输出链接： https://drive.google.com/file/d/18rT4MxajPJXjlscsjbMaVxVkihGavGQh/view?usp=drivesdk