#css 涟漪+旋转

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="dot"></div>
</body>
<style>
    body {
        margin: 0;
        padding: 0;
        background-color: #323232;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    
    #dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #00ff00;
        animation: waterfade 2s linear infinite, move 15s infinite;
    }
    
    @keyframes move {
        0% {
            transform: rotate(0deg) translate(-300px) rotate(0deg);
        }
        50% {
            transform: rotate(720deg) translate(-30px) rotate(-720deg);
        }
        100% {
            transform: rotate(0deg) translate(-300px) rotate(0deg);
        }
    }
    
    @keyframes waterfade {
        0% {
            box-shadow: 0 0 0 0 #00ff0055, 0 0 0 10px #00ff0055, 0 0 0 20px #00ff0055, 0 0 0 30px #00ff0055;
        }
        100% {
            box-shadow: 0 0 0 10px #00ff0055, 0 0 0 20px #00ff0055, 0 0 0 30px #00ff0055, 0 0 0 40px #00ff0000;
        }
    }
</style>

</html>
#css 涟漪+旋转

推荐阅读
