Efecto Mariposa
body { margin: 0; overflow: hidden; background: #f0f0f0; } #container { position: relative; width: 100vw; height: 100vh; } #butterfly { position: absolute; width: 50px; height: 50px; background: url('https://miro.medium.com/v2/resize:fit:1400/1*wgDo_FErP77YEKyYUGv3TA.png') no-repeat center center; background-size: contain; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: flap 2s infinite; } #tornado { position: absolute; width: 100px; height: 200px; background: radial-gradient(circle, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 70%); border-radius: 50%; top: 50%; right: -150px; transform: translateY(-50%); opacity: 0; animation: tornado 5s infinite; } @keyframes flap { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 50% { transform: translate(-50%, -50%) rotate(15deg); } } @keyframes tornado { 0% { transform: translateY(-50%) scale(1); opacity: 0; } 50% { transform: translateY(-50%) scale(1.5); opacity: 1; } 100% { transform: translateY(-50%) scale(2); opacity: 0; } } document.addEventListener('DOMContentLoaded', () => { const butterfly = document.getElementById('butterfly'); const tornado = document.getElementById('tornado'); // Simulamos el efecto de la mariposa provocando el tornado butterfly.addEventListener('animationiteration', () => { tornado.style.animation = 'tornado 5s infinite'; }); });

Comentarios

Entradas más populares de este blog

UN POCO DE NOTACION CIENTIFICA

LAS MATEMÁTICAS QUE AYUDAN AL TELESCOPIO ESPACIAL JAMES WEBB A PERMANECER ESTABLE EN EL ESPACIO