.bg { width: 100vw; height: 100vh; } <div class="bg"> <img src="https://www.roadsbridges.com/sites/rb/files/styles/content_type_page/public/Traffic_Safety_64.jpg?itok=a9CICO90" alt=""/> </div>Hola, quiero usar la imagen de la carretera como fondo, pero también quiero que se reproduzca en la pantalla una y otra vez infinitamente como si la carretera se estuviera moviendo. ¿Qué código CSS o ReactJS puedo usar para hacer eso?
Hay diferentes formas de hacerlo, mira este codepen https://codepen.io/konker/pen/Qozzrj
#road { opacity:.9; width: 120vw; height: 20vw; min-height:200px; background: #888; background-image: linear-gradient( rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(80, 80, 80, 0.2) 50%, rgba(30, 30, 30, 0.4) 70%, rgba(60, 60, 60, 0.5) 87%, rgba(180, 180, 180, 0.5) 100% ), url("image url"); background-size: 19vw auto; transform-origin: center top; transform: rotateX(45deg) translate(-20vw); animation: stripemove 0.2s linear infinite; } @keyframes stripemove { to { transform: rotateX(45deg) translate(0vw); } }Utilice la propiedad de animación como:
.bg img { height: 25vh; width: 200vw; position: absolute; left: 0; bottom: 0; z-index: 10; animation: moving 3s linear infinite 1s; } @keyframes moving { 100% { transform: translateX(-100vw); } }Creo que puedes usar la propiedad css transform-y y animaciones
Esto definitivamente tomará esa imagen y la ejecutará una y otra vez. sin animarlo.
.bg { background: url("https://www.roadsbridges.com/sites/rb/files/styles/content_type_page/public/Traffic_Safety_64.jpg?itok=a9CICO90"); width: 100vw; height: 100vh; background-size: 300px 100px; } <div class="bg"> </div>