Home >Web Front-end >JS Tutorial >Hypnotic Spiral illusion using html css and javascript

Hypnotic Spiral illusion using html css and javascript

Mary-Kate OlsenOriginal: 2024-12-04 15:42:12837browse

<!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>

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!

JavaScript css html using display position overflow margin padding border viewport background transform animation flex Translate

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Can I Detect Real-time Input Changes in jQuery Beyond the .change() Event?Next article：How Can I Detect Real-time Input Changes in jQuery Beyond the .change() Event?

See more

Hypnotic Spiral illusion using html css and javascript

Related articles