Home >Web Front-end >JS Tutorial >Morphism Ring code

Morphism Ring code

Mary-Kate OlsenOriginal: 2025-01-03 00:10:39998browse

Morphism Ring code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Morphing Gradient Ring</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(120deg, #0d1015, #091529);
            overflow: hidden;
        }

        .ring-container {
            position: relative;
            width: 300px;
            height: 300px;
        }

        .ring {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: conic-gradient(
            from 0deg, #ff7eb3, #ff758c,#ff6a56, 
            #f9a826,#f02fc2#9b00ff,#ff7eb3
            );
            transform: translate(-50%, -50%) 
            rotate(0deg);
            animation: rotateRing 5s linear infinite;
        }

        .ring::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 80%;
            height: 80%;
            background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.1));
            border-radius: 50%;
            filter: blur(10px);
            transform: translate(-50%, -50%);
        }

        .ring::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60%;
            height: 60%;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

        @keyframes rotateRing {
            0% {
                transform: translate(-50%, -50%) 
                rotate(0deg);
            }
            100% {
                transform: translate(-50%, -50%)
                rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div>

The above is the detailed content of Morphism Ring code. For more information, please follow other related articles on the PHP Chinese website!

html Filter display position overflow margin 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 Do I Efficiently Append Elements to a JavaScript Array?Next article：How Do I Efficiently Append Elements to a JavaScript Array?

See more

Morphism Ring code

Related articles