Rocket Launching HTML+CSS Design

 Rocket Launching Design:-

CODE:-

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .{

            margin: 0%;

            padding: 0%;

            box-sizing: border-box;

        }

        body{

            display: flex;

            justify-content: center;

            align-items: center;

            min-height: 100vh;

            background: #ffeb3b;

            overflow: hidden;

        }

        .pulse{

            position: relative;

            width: 200px;

            height: 200px;

            background: #ff5722;

            border-radius: 50%;

        }

        .pulse span{

            position: absolute;

            top: 0;

            left: 0;

            background: #ff5722;

            border-radius: 50%;

            display: inline-block;

            width: 100%;

            height: 100%;

            animation: animate 2.5s linear infinite;

            animation-delay:calc(-0.5s * var(--i)) ;

        }

        @keyframes animate {

            0%{

                transform: scale(1);

                opacity: 0.5;

            }

            90%{

                transform: scale(3);

            }

            100%{

                transform: scale(4);

                opacity: 0;

            }

        }

        .rocket{

            position: relative;

            top: 50px;

            text-align: center;

            animation: rocket 0.1s ease infinite;

        }

        @keyframes rocket{

            0%,100%{

                transform: translateY(-1px);

            }

            50%{

                transform: translateY(1px);

            }

        }

        .rocket::before{

            content: '';

            position: absolute;

            bottom: -250%;

            left: 50%;

            transform: translateX(-50%);

            width: 20px;

            height: 250px;

            background: linear-gradient(#ffc107,transparent);

        }

        .rocket::after{

            content: '';

            position: absolute;

            bottom: -250%;

            left: 50%;

            transform: translateX(-50%);

            width: 20px;

            height: 250px;

            background: linear-gradient(#ce7706,transparent);

            filter: blur(20px);

        }

    </style>

</head>

<body>

    <div class="pulse">

        <span style="--i:1;"></span>

        <span style="--i:2;"></span>

        <span style="--i:3;"></span>

        <span style="--i:4;"></span>

        <span style="--i:5;"></span>

        

        <div class="rocket">

            <img src="resources/rocket1.png" width="50%" height="50%">

        </div>

    </div>

</body>

</html>

OUTPUT:-