En cadeau de la Fête de la Mi-Automne, partagez un effet d'animation CSS de révolution du soleil, de la terre et de la lune !-tutoriel CSS-php.cn

En cadeau de la Fête de la Mi-Automne, partagez un effet d'animation CSS de révolution du soleil, de la terre et de la lune !

青灯夜游

Libérer： 2021-09-23 09:50:14

avant

2502 Les gens l'ont consulté

La Fête de la Mi-Automne arrive bientôt. Dans cet article, je partagerai avec vous un effet d'animation de la révolution du soleil, de la terre et de la lune réalisé en CSS pur. Ouvrez-le et venez l'apprendre !

En cadeau de la Fête de la Mi-Automne, partagez un effet danimation CSS de révolution du soleil, de la terre et de la lune !

Pour cet événement de la Fête de la Mi-Automne des Nuggets, j'ai réfléchi fort pendant deux jours, et j'ai finalement pensé à quelque chose qui n'a jamais été fait par personne dans les Nuggets (ils n'ont probablement jamais été fait auparavant, je je ne sais pas)—— Utilisez HTML+CSS pour simuler la révolution du soleil, de la terre et de la lune. [Recommandation associée : "Tutoriel vidéo CSS"]

Nous savons tous que la lune lors de la fête de la mi-automne est grande et ronde parce que le soleil, la terre et la lune sont en ligne droite pendant leur révolution, avec la terre en le milieu, et respectivement le soleil et la lune. Aux deux extrémités de la terre, la phase de la lune ce jour-là est la pleine lune. Ce paragraphe peut être ignoré car il est lié à la Fête de la Mi-Automne.

Mais comme je n'ai jamais appris le front-end, j'ai rattrapé mon retard au cours des deux derniers jours et j'ai réappris flexbox et grid. on peut dire qu'il est plutôt bon (si mon S'il n'y a pas de problème d'esthétique). flexbox 和 grid ，成果应该说还挺好看（如果我的审美没有问题的话）。

配色我挺喜欢的，希望你也喜欢。

源码我放到了 CodePen 上，链接 Sun Earth Moon (codepen.io)

HTML

重点是CSS，HTML放上三个 div

J'aime beaucoup la palette de couleurs, j'espère que vous l'aimerez aussi.

J'ai mis le code source sur CodePen, lien Soleil Terre Lune (codepen.io )

HTML

Le point clé est CSS Mettez trois div en HTML et tout ira bien.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Mancuoj</title>
        <link
            href="simulation.css"
            rel="stylesheet"
        />
    </head>

    <body>
        <h1>Mancuoj</h1>
        <figure>
            <div></div>
            <div>
                <div></div>
            </div>
        </figure>
    </body>
</html>

Copier après la connexion

Arrière-plan et texte

Importez ma police Lobster préférée, puis réglez-la sur blanc et rendez la police un peu plus fine.

@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");

h1 {
    color: white;
    font-size: 60px;
    font-family: Lobster, monospace;
    font-weight: 100;
}

Copier après la connexion

J'ai trouvé au hasard un fond noir et violet, puis j'ai placé le contenu du tableau au milieu.

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

.container {
    font-size: 10px;
    width: 40em;
    height: 40em;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

Copier après la connexion

Animation Soleil, Terre et Lune

Comme nous le savons tous : la terre tourne autour du soleil et la lune tourne autour de la terre. Ce que nous dessinons est la révolution, alors dessinez simplement le soleil directement et ajoutez des ombres et des reflets, et la lune et la terre tourneront. La chose la plus importante est en fait la correspondance des couleurs (les sites Web recommandés se trouvent à la fin de l'article). J'ai longtemps expérimenté la correspondance des couleurs et j'ai finalement utilisé trois couleurs dégradées pour représenter le soleil, la terre et la lune.

日: linear-gradient(#fcd670, #f2784b);
地: linear-gradient(#19b5fe, #7befb2);
月: linear-gradient(#8d6e63, #ffe0b2);

Copier après la connexion

CSS ne devrait pas être difficile pour tout le monde, il suffit d'y jeter un oeil.

La piste utilise des bordures et des lignes argentées sont utilisées comme orbite de révolution.

.sun {
    position: absolute;
    width: 10em;
    height: 10em;
    background: linear-gradient(#fcd670, #f2784b);
    border-radius: 50%;
    box-shadow: 0 0 8px 8px rgba(242, 120, 75, 0.2);
}

.earth {
    --diameter: 30;
    --duration: 36.5;
}

.moon {
    --diameter: 8;
    --duration: 2.7;
    top: 0.3em;
    right: 0.3em;
}

.earth,
.moon {
    position: absolute;
    width: calc(var(--diameter) * 1em);
    height: calc(var(--diameter) * 1em);
    border-width: 0.1em;
    border-style: solid solid none none;
    border-color: silver transparent transparent transparent;
    border-radius: 50%;
    animation: orbit linear infinite;
    animation-duration: calc(var(--duration) * 1s);
}

@keyframes orbit {
    to {
        transform: rotate(1turn);
    }
}

.earth::before {
    --diameter: 3;
    --color: linear-gradient(#19b5fe, #7befb2);
    --top: 2.8;
    --right: 2.8;
}

.moon::before {
    --diameter: 1.2;
    --color: linear-gradient(#8d6e63, #ffe0b2);
    --top: 0.8;
    --right: 0.2;
}

.earth::before,
.moon::before {
    content: "";
    position: absolute;
    width: calc(var(--diameter) * 1em);
    height: calc(var(--diameter) * 1em);
    background: var(--color);
    border-radius: 50%;
    top: calc(var(--top) * 1em);
    right: calc(var(--right) * 1em);
}

Copier après la connexion

Résumé

Ce n'est pas facile de participer à un événement, mais le front end reste quand même assez amusant. Recommande quelques sites Web sur lesquels je recherche des couleurs :
Style CSS3 de fond dégradé gratuit | oulu.me
uiGradients - Beaux dégradés de couleurs
Palettes de couleurs pour les designers et les artistes - Color Hunt
中国色 - Couleurs traditionnelles chinoises (zhongguose.com)