Morphisme Code de sonnerie-js tutoriel-php.cn

Morphisme Code de sonnerie

Mary-Kate Olsen

Libérer： 2025-01-03 00:10:39

original

984 Les gens l'ont consulté

Morphism Ring code

<!DOCTYPE html>
<html lang="fr">
<tête>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anneau de dégradé de morphing</title>
    <style>
        corps {
            marge : 0 ;
            hauteur : 100vh ;
            affichage : flexible ;
            justifier-contenu : centre ;
            aligner les éléments : centre ;
            arrière-plan : dégradé linéaire (120 deg, #0d1015, #091529) ;
            débordement : caché ;
        }

        .ring-conteneur {
            position : relative ;
            largeur : 300 px ;
            hauteur : 300px ;
        }

        .anneau {
            position : absolue ;
            haut : 50 % ;
            gauche : 50 % ;
            largeur : 100 % ;
            hauteur : 100 % ;
            rayon de bordure : 50 % ;
            arrière-plan : dégradé conique (
            à partir de 0deg, #ff7eb3, #ff758c,#ff6a56, 
            #f9a826,#f02fc2#9b00ff,#ff7eb3
            );
            transformer : traduire (-50 %, -50 %) 
            faire pivoter (0deg);
            animation : rotateRing 5s linéaire infini ;
        }

        .ring::avant {
            contenu: '';
            position : absolue ;
            haut : 50 % ;
            gauche : 50 % ;
            largeur : 80 % ;
            hauteur : 80 % ;
            arrière-plan : dégradé linéaire (en bas à droite, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.1) );
            rayon de bordure : 50 % ;
            filtre : flou (10 px );
            transformer : traduire (-50 %, -50 %);
        }

        .ring::après {
            contenu: '';
            position : absolue ;
            haut : 50 % ;
            gauche : 50 % ;
            largeur : 60 % ;
            hauteur : 60 % ;
            arrière-plan : rgba(255, 255, 255, 0,1) ;
            bordure : 2px rgba solide (255, 255, 255, 0,2) ;
            rayon de bordure : 50 % ;
            transformer : traduire (-50 %, -50 %);
        }

        @keyframes rotationRing {
            0% {
                transformer : traduire (-50 %, -50 %) 
                faire pivoter (0deg);
            }
            100 % {
                transformer : traduire (-50 %, -50 %)
                faire pivoter (360 degrés);
            }
        }
    </style>
&Lt;/tête>
<corps>
    <div>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!