Introducción al proyecto: en este proyecto, vamos a implementar un automóvil que corre en una pista usando HTML y CSS con efectos de sonido. Los requisitos previos de este proyecto son HTML, CSS y JavaScript.
Estructura del archivo:
- índice.html
- estilo.css
- guión.js
Código HTML: En el siguiente código, hemos colocado el sky div de tal manera que cubra toda la página web. Después de eso, el árbol, la pista, el automóvil se colocan sobre el cielo y, finalmente, las ruedas se colocan en el automóvil para que puedan girar, y podemos crear una animación para un automóvil en marcha. Agregamos los estilos usando el archivo style.css y aplicamos los efectos de sonido de script.js .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Lamborghini car animation</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <div class="sky"> <div class="tree"></div> <div class="track"></div> <div class="car"></div> <div class=" wheel wheel1"></div> <div class="wheel wheel2"></div> </div> </body> </html>
style.css: El siguiente es el código para el archivo «style.css» que se utiliza en el código HTML anterior.
/* 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);
}
}
Explicación:
- cielo: hemos colocado el cielo de modo que cubra toda la ventana gráfica asignándole 100vw y 100vh y hemos establecido la posición en absoluto .
- árbol: Hemos posicionado el árbol de manera que ocupe la parte inferior de la página web usando posición: propiedad absoluta .
- pista: hemos colocado la pista en la parte inferior de la página web y la hemos repetido en la dirección x para que siempre permanezca visible en la animación. También hemos asignado un ancho muy grande a la pista para el mismo propósito. Ahora, la animación aplicada a la pista mueve la pista hacia atrás de modo que parece que el automóvil se está moviendo.
- coche, rueda: primero colocamos el coche y sus ruedas en las posiciones deseadas y luego hicimos que las ruedas giraran aplicando la animación adecuada como se indica en el código anterior.
script.js: El siguiente es el código para el archivo script.js utilizado en el archivo HTML anterior. Este archivo es básicamente para aplicar los efectos de sonido deseados.
var aud=document.createElement('audio');
aud.setAttribute('src','sound.mp4');
aud.loop=true;
aud.play();
Producción:
Enlace del código fuente: https://github.com/SAEb-ai/Racing-Car-Animation
Enlace de salida: https://drive.google.com/file/d/18rT4MxajPJXjlscsjbMaVxVkihGavGQh/view?usp=drivesdk
Publicación traducida automáticamente
Artículo escrito por shahbazalam75508 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA