Démonstration vidéo : Comment créer une Saturn réaliste avec CSS ? (avec code)-tutoriel CSS-php.cn

Démonstration vidéo : Comment créer une Saturn réaliste avec CSS ? (avec code)

php是最好的语言

Libérer： 2018-07-30 14:22:05

original

1937 Les gens l'ont consulté

Démonstration vidéo : Comment créer une Saturn réaliste avec CSS ? (avec code)

Aperçu de l'effet

Appuyez sur le bouton "Cliquez pour prévisualiser" à droite pour prévisualiser sur la page actuelle, ou cliquez sur le lien pour prévisualiser en plein écran.

https://codepen.io/comehope/pen/EpbaQX

Vidéo interactive

Cette vidéo est interactive, vous pouvez mettre la vidéo en pause à tout moment et la modifier code.

Veuillez utiliser Chrome, Safari, Edge pour ouvrir et regarder.

https://scrimba.com/p/pEgDAM/cBdyeTw

Interprétation du code

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

<p class="saturn">
        <span class="rings"></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

Dessinez la planète Saturne (c'est un brouillon, il sera à affiner plus tard ) :

.saturn {
    position: relative;
}

.saturn::before,
.saturn::after {
    content: &#39;&#39;;
    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 (il s'agit d'un brouillon 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 et des anneaux de Saturne de bas en haut soit : la moitié inférieure du planète, les anneaux de Saturne et la moitié supérieure de la planète :

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