Comment utiliser du CSS pur pour obtenir l'effet d'un Saturne-tutoriel CSS-php.cn

Comment utiliser du CSS pur pour obtenir l'effet d'un Saturne

不言

Libérer： 2018-07-28 11:25:04

original

2269 Les gens l'ont consulté

Cet article vous présente comment utiliser du CSS pur pour obtenir l'effet d'un Saturne. Il a une bonne valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.

Aperçu de l'effet

Comment utiliser du CSS pur pour obtenir leffet dun Saturne

Interprétation du code

Définissez dom, le conteneur lui-même représente la planète Saturne, et le ring L'élément représente les anneaux de Saturne :

<p>
        <span></span>
    </p>

Copier après la connexion

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

Copier après la connexion

Définir la taille du conteneur :

.saturn {
    width: 20em;
    height: 20em;
    font-size: 20px;
}

Copier après la connexion

Dessiner la planète Saturne (il s'agit d'un brouillon, plus les détails seront donnés plus tard) ) :

.saturn {
    position: relative;
}

.saturn::before,
.saturn::after {
    content: '';
    position: absolute;
    width: 9em;
    height: 9em;
    background: linear-gradient(
        palegoldenrod 0%,
        tan 10%,
        burlywood 30%,
        palegoldenrod 60%,
        darkgray 100%
    );
    border-radius: 50%;
    left: calc((20em - 9em) / 2);
    top: calc((20em - 9em) / 2);
}

Copier après la connexion

Dessinez les anneaux de Saturne (ceci est une ébauche et sera affiné ultérieurement) :

.rings {
    position: absolute;
    width: inherit;
    height: inherit;
    background: radial-gradient(
        transparent 35%,
        dimgray 40%,
        slategray 50%,
        transparent 60%,
        dimgray 60%,
        slategray 70%,
        transparent 70%
    );
}

Copier après la connexion

Changer la perspective d'observation des anneaux de Saturne :

.rings {
    transform: rotateX(75deg);
}

Copier après la connexion

Afin de donner l'impression que Saturne est entouré d'anneaux, divisez Saturne en moitiés supérieure et inférieure, de sorte que l'ordre des couches de celles-ci et des anneaux de Saturne de bas en haut soit : l'inférieur la moitié de la planète, les anneaux de Saturne et la moitié supérieure de la planète. Département :

.saturn::before {
    clip-path: inset(50% 0 0 0);
}

.saturn::after {
    clip-path: inset(0 0 50% 0);
}

Copier après la connexion

À ce stade, la structure globale de Saturne a été dessinée, puis les détails sont affinés.
Peignez les anneaux de Saturne avec de riches dégradés de couleurs :

.rings {
    background: radial-gradient(
        rgba(24,19,25,0) 0%,
        rgba(53,52,51,0) 34%,
        rgba(55,54,52,1) 36%,
        rgba(56,55,53,1) 37%,
        rgba(68,67,66,1) 38%,
        rgba(56,55,53,1) 39%,
        rgba(68,67,66,1) 40%,
        rgba(56,55,53,1) 41%,
        rgba(87,77,76,1) 42%,
        rgba(87,77,76,1) 44%,
        rgba(113,110,103,1) 46%,
        rgba(113,110,103,1) 48%,
        rgba(113,98,93,1) 49%,
        rgba(113,98,93,1) 51%,
        rgba(122,115,105,1) 52%,
        rgba(113,98,93,1) 53%,
        rgba(113,98,93,1) 54%,
        rgba(122,115,105,1) 55%,
        rgba(106,99,89,1) 56%,
        rgba(106,99,89,1) 58%,
        rgba(79,76,76,0) 60%,
        rgba(65,64,70,1) 61%,
        rgba(65,64,70,1) 62%,
        rgba(90,85,89,1) 63%,
        rgba(78,74,73,1) 65%,
        rgba(78,73,74,1) 67%,
        rgba(78,73,74,0) 68%,
        rgba(78,73,75,1) 69%,
        rgba(78,73,75,1) 70%,
        rgba(78,73,76,0) 71%,
        rgba(77,72,76,0) 72%,
        rgba(24,19,25,0) 100%
    );
}

Copier après la connexion

Peignez la planète avec de riches dégradés de couleurs :

.saturn::before,
.saturn::after {
    background:
        linear-gradient(
            rgba(212,203,174,1) 0%,
            rgba(212,203,174,1) 10%,
            rgba(221,203,157,1) 15%,
            rgba(221,203,157,1) 17%,
            rgba(213,181,143,1) 22%,
            rgba(213,181,143,1) 26%,
            rgba(208,180,158,1) 32%,
            rgba(208,180,158,1) 36%,
            rgba(218,188,162,1) 37%,
            rgba(218,188,162,1) 39%,
            rgba(211,184,157,1) 41%,
            rgba(211,184,157,1) 49%,
            rgba(205,186,156,1) 51%,
            rgba(205,186,156,1) 52%,
            rgba(202,176,153,1) 53%,
            rgba(202,176,153,1) 65%,
            rgba(190,177,145,1) 68%,
            rgba(190,177,145,1) 80%,
            rgba(150,144,130,1) 91%,
            rgba(150,144,130,1) 95%,
            rgba(131,129,117,1) 97%,
            rgba(131,129,117,1) 100%
        );
}

Copier après la connexion

Ajoutez des effets de lumière à la planète :

.saturn::before,
.saturn::after {
    background:
        radial-gradient(
            circle at top, 
            transparent 40%,
            black
        ),
        radial-gradient(
            transparent 62%,
            black
        ),
        linear-gradient(
            rgba(212,203,174,1) 0%,
            rgba(212,203,174,1) 10%,
            rgba(221,203,157,1) 15%,
            rgba(221,203,157,1) 17%,
            rgba(213,181,143,1) 22%,
            rgba(213,181,143,1) 26%,
            rgba(208,180,158,1) 32%,
            rgba(208,180,158,1) 36%,
            rgba(218,188,162,1) 37%,
            rgba(218,188,162,1) 39%,
            rgba(211,184,157,1) 41%,
            rgba(211,184,157,1) 49%,
            rgba(205,186,156,1) 51%,
            rgba(205,186,156,1) 52%,
            rgba(202,176,153,1) 53%,
            rgba(202,176,153,1) 65%,
            rgba(190,177,145,1) 68%,
            rgba(190,177,145,1) 80%,
            rgba(150,144,130,1) 91%,
            rgba(150,144,130,1) 95%,
            rgba(131,129,117,1) 97%,
            rgba(131,129,117,1) 100%
        );
}

Copier après la connexion

Enfin, faites pivoter un peu l'écran :

.saturn {
    transform: rotate(-15deg);
}

Copier après la connexion

Vous avez terminé !

Recommandations associées :

Comment utiliser CSS et D3 pour obtenir l'effet d'un espace hexagonal sans fin

Comment utiliser CSS pour dessiner un oiseau (code)

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!