Ask for this kind of halo css animation

clipboard.png
ask for such halo css animation

Css
Mar.10,2021

Animation is not limited to static styles.

background: -webkit-radial-gradient(
        rgba(255,0,0,1) 0px,
        rgba(255,0,0,1) 10px, 
        rgba(255,0,0,.8) 10px,
        rgba(255,0,0,.6) 20px,
        rgba(255,0,0,1) 20px,
        rgba(255,0,0,1) 22px,
        rgba(255,0,0,.7) 22px,
        rgba(255,0,0,.7) 60px,
        rgba(255,0,0,1) 60px,
        rgba(255,0,0,1) 62px,
        rgba(255,0,0,.7) 62px,
        rgba(255,0,0,.5) 100px,
        rgba(255,0,0,1) 100px,
        rgba(255,0,0,1) 102px,
        rgba(255,0,0,.3) 102px,
        rgba(255,0,0,.3) 110px,
        rgba(255,0,0,1) 110px,
        rgba(255,0,0,1) 112px,
        rgba(255,0,0,.3) 112px,
        white 120px,
        white);

https://jsfiddle.net/3L6q0w5L/


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .common {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid red;
        }

        .one {
            -moz-animation: sunny 10s linear infinite;
            -ms-animation: sunny 10s linear infinite;
            -webkit-animation: sunny 10s linear infinite;
            animation: sunny 10s linear infinite;
            width: 200px;
            height: 200px;
            box-shadow: 0 0 20px 5px blue;
        }

        .two {
            width: 80%;
            height: 80%;
            box-shadow: 0 0 20px 5px blue;
        }

        .three {
            width: 60%;
            height: 60%;
            box-shadow: 0 0 20px 8px blue;
        }

        .four {
            width: 40%;
            height: 40%;
            box-shadow: 0 0 20px 5px blue;
        }

        .five {
            width: 20%;
            height: 20%;
            background-color: red;
            box-shadow: 0 0 20px 5px blue;
        }

        @-webkit-keyframes sunny {
            0% {
                width: 200px;
                height: 200px;
            }
            50% {
                width: 100px;
                height: 100px;
            }
            100%{
                width: 200px;
                height: 200px;
            }
        }
        @keyframes sunny {
            0% {
                width: 200px;
                height: 200px;
            }
            50% {
                width: 100px;
                height: 100px;
            }
            100%{
                width: 200px;
                height: 200px;
            }
        }
    </style>
</head>

<body>
    <div class="one common">
        <div class="two common">
            <div class="three common">
                <div class="four common">
                    <div class="five common"></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

try it?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e47c7b-591e6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e47c7b-591e6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?