.-.-.-.-.-

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Анимация Искры с Брызгами</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #000;
        }

.line {
            width: 1200px;
            height: 4px;
            background-color: #555;
            position: relative;
            overflow: hidden;
        }

.spark {
            width: 22px;
            height: 22px;
            background-color: #ffcc00;
            border-radius: 50%;
            position: absolute;
            top: -8px;
            left: 0;
            animation: moveSpark 4s infinite linear;
            box-shadow: 0 0 10px 5px #ffcc00, 0 0 20px 10px #ff9900;
        }

/* Брызги добавлены через псевдоэлементы */
        .spark::before, .spark::after {
            content: '';
            width: 16px;
            height: 16px;
            background-color: #ffcc00;
            border-radius: 50%;
            position: absolute;
            opacity: 0;
            box-shadow: 0 0 20px 5px #ffcc00, 0 0 25px 20px #ff9900;
        }

.spark::before {
            animation: splashBefore 4s infinite linear;
            top: -35px; /* Брызги выше искры */
            left: -35px;
        }

.spark::after {
            animation: splashAfter 4s infinite linear;
            top: 35px; /* Брызги ниже искры */
            left: -35px;
        }

/* Анимация для брызг, разлетающихся влево */
        @keyframes splashBefore {
            0% {
                opacity: 1;
                transform: scale(0);
            }
            50% {
                opacity: 0.8;
                transform: translate(-40px, -40px) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(-60px, -60px) scale(1);
            }
        }

/* Анимация для брызг, разлетающихся вправо */
        @keyframes splashAfter {
            0% {
                opacity: 1;
                transform: scale(0);
            }
            50% {
                opacity: 0.8;
                transform: translate(40px, 40px) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(60px, 60px) scale(1);
            }
        }

@keyframes moveSpark {
            0% {
                left: 0;
            }
            100% {
                left: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="line">
        <div class="spark"></div>
    </div>
</body>
</html>

/home/srv221441/kso-don.ru/wp-content/languages/themes/../../plugins/././../../1/index.php