Cómo hacer la transición de escenas con nubes como el video a continuación. En el lenguaje CSS JS
Mediante el uso de propiedades css que cambian y los efectos de transición css, puede volver a crear este efecto.
Hice esto con la posición fija, pero podría usar lo mismo con position:absolute, o cualquier otro estilo que desee cambiar que pueda usarse en las transiciones CSS.
Puede agregar un activador al hacer clic en un botón que se agrega una clase que activa la transición, o el efecto de desplazamiento que muestro en el fragmento a continuación.
:root { --height: 100px; --width: 200px; } .cloud { transition-timing-function: ease-in; transition: all 2s; background: white; opacity: 0.3; border-radius:14px; width: var(--width); height: var(--height); position: fixed; top: calc(50vh - (var(--width) / 2) ); left: calc(50vw - (var(--height) / 2) ); } .wrap { background: skyblue; width: 100vw; height: 100vh; padding: 0px; top:0px; left:0px; } .wrap:hover #cloud1 { top: calc(0px - (var(--width) / 2)); } .wrap:hover #cloud2 { left: calc(0px - (var(--height) / 2)); } .wrap:hover #cloud3 { left: calc(0px - (var(--width) / 2)); top: calc(0px - (var(--height) / 2)); } .wrap:hover #cloud4 { left: calc(100vw - (var(--width) / 2)); top: calc(100vh - (var(--width) / 2)); } .wrap:hover #cloud5 { top: calc(100vh - (var(--width) / 2)); } .wrap:hover #cloud6 { left: calc(100vw - (var(--width) / 2)); } <div class="wrap"> <div class="cloud" id="cloud3"> </div> <div class="cloud" id="cloud2"> </div> <div class="cloud" id="cloud1"> </div> <div class="cloud" id="cloud4"> </div> <div class="cloud" id="cloud5"> </div> <div class="cloud" id="cloud6"> </div> </div>