<style>

body {
    margin: 0;
    height: 100vh;
    background: linear-gradient(to top, #87CEEB, #000033);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.scene {
    position: relative;
    width: 100%;
    height: 100%;
}

.rocket {
    position: absolute;
    bottom: 50px;
    width: 50px;
    height: 100px;
    background: #ccc;
    border-radius: 50px 50px 0 0;
    transition: transform 3s ease-out;
}

.flame {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: orange;
    border-radius: 50%;
    animation: flicker 0.1s infinite;
    display: none;
}

@keyframes flicker {
    0% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.2); }
    100% { transform: translateX(-50%) scale(1); }
}

.rocket.launched {
    transform: translateY(-100vh);
}

.rocket.launched .flame {
    display: block;
}

.ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #4CAF50;
}

</style> <div class="scene"> <div class="rocket"> <div class="flame"></div> </div> <div class="ground"></div> </div> <button onclick="launchRocket()">Lancia il razzo!</button> <script> function launchRocket() { const rocket = document.querySelector('.rocket'); rocket.classList.add('launched'); } </script>