Hypnotic Spiral illusion using html css and javascript-JS Tutorial-php.cn

Hypnotic Spiral illusion using html css and javascript

Mary-Kate Olsen

Release： 2024-12-04 15:42:12

Original

856 people have browsed it

Hypnotic Spiral illusion using html css and javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hypnotic Spiral Animation</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background: #000;
            overflow: hidden;
            color: #fff;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .spiral {
            position: relative;
            width: 200px;
            height: 200px;
            animation: spin 4s linear infinite;
        }
        .spiral::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid transparent;
            border-image: conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
            border-image-slice: 1;
            animation: animateSpiral 10s linear infinite;
        }
        .wave {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.3);
            animation: expandWave 1s ease-out infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes animateSpiral {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(0.5); }
        }
        @keyframes expandWave {
            0% {
                width: 0;
                height: 0;
                opacity: 1;
            }
            100% {
                width: 500px;
                height: 500px;
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div>

Copy after login

The above is the detailed content of Hypnotic Spiral illusion using html css and javascript. For more information, please follow other related articles on the PHP Chinese website!