Heim >Web-Frontend >CSS-Tutorial >Teilen Sie als Geschenk zum Mittherbstfest einen CSS-Animationseffekt für die Sonnen-, Erd- und Mondrevolution!

Teilen Sie als Geschenk zum Mittherbstfest einen CSS-Animationseffekt für die Sonnen-, Erd- und Mondrevolution!

青灯夜游nach vorne: 2021-09-15 10:31:002546Durchsuche

Das Mittherbstfest steht vor der Tür. In diesem Artikel werde ich einen Animationseffekt der Revolution von Sonne, Erde und Mond vorstellen, der in reinem CSS realisiert wurde.

Für diese Mittherbstfest-Veranstaltung der Nuggets habe ich zwei Tage lang angestrengt nachgedacht und mir schließlich etwas einfallen lassen, das noch nie jemand in den Nuggets gemacht hat (wahrscheinlich wurden sie noch nie zuvor gemacht, ich). Weiß nicht)—— Verwenden Sie HTML+CSS, um den Umlauf von Sonne, Erde und Mond zu simulieren. [Verwandte Empfehlung: „CSS-Video-Tutorial“]

Wir alle wissen, dass der Mond beim Mittherbstfest groß und rund ist, weil Sonne, Erde und Mond während ihres Umlaufs in einer geraden Linie stehen, wobei die Erde darin liegt die Mitte und die Sonne bzw. der Mond. An beiden Enden der Erde ist die Mondphase an diesem Tag der Vollmond. Dieser Absatz kann übersprungen werden, da er sich auf das Mittherbstfest bezieht.

Aber weil ich Frontend überhaupt nicht gelernt habe, habe ich es in den letzten zwei Tagen nachgeholt und flexbox und grid neu gelernt. Die Ergebnisse sollten Man kann sagen, dass es ziemlich gut ist (wenn es kein Problem mit der Ästhetik gibt). flexbox 和 grid ，成果应该说还挺好看（如果我的审美没有问题的话）。

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

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

HTML

重点是CSS，HTML放上三个 div

Mir gefällt das Farbschema sehr, ich hoffe, es gefällt euch auch.

Ich habe den Quellcode auf CodePen gestellt, Link Sun Earth Moon (codepen.io )

HTML

Der entscheidende Punkt ist CSS. Fügen Sie drei div in HTML ein und es wird in Ordnung sein.

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

Hintergrund und Text

Importieren Sie meine Lieblings-Lobster-Schriftart, stellen Sie sie dann auf Weiß ein und machen Sie die Schrift etwas dünner.

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

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

Ich habe zufällig einen dunkelvioletten Hintergrund gefunden und dann den Inhalt des Gemäldes in die Mitte gesetzt.

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;
}

Animation zu Sonne, Erde und Mond

Wie wir alle wissen: Die Erde dreht sich um die Sonne und der Mond dreht sich um die Erde. Was wir zeichnen, ist die Revolution, also zeichnen Sie einfach die Sonne direkt und fügen Sie Schatten und Lichter hinzu, und der Mond und die Erde werden sich drehen. Das Wichtigste ist eigentlich die Farbabstimmung (empfohlene Websites finden Sie am Ende des Artikels). Ich habe lange mit der Farbabstimmung experimentiert und schließlich drei Verlaufsfarben verwendet, um Sonne, Erde und Mond darzustellen.

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

CSS sollte nicht für jeden schwierig sein, werfen Sie einfach einen Blick darauf.

Die Strecke verwendet Grenzen und silberne Linien dienen als Umlaufbahn.

.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);
}

Zusammenfassung

Es ist nicht einfach, an einer Veranstaltung teilzunehmen, aber das Frontend macht trotzdem ziemlich viel Spaß. Empfehlen Sie einige Websites, auf denen ich nach Farben suche:
Kostenloser Verlaufshintergrund im CSS3-Stil | Farbjagd
中国色 - Traditionelle chinesische Farben (zhongguose.com)
Paletten |. Flache UI-Farben 280 handverlesene Farben bereit zum KOPIEREN & EINFÜGEN
Material Design-Farben, Farbpalette |. Material-Benutzeroberfläche

Originaladresse: https://juejin.cn/post/7006507905050492935

Autor: Mancuoj

Weitere Programmierkenntnisse finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonTeilen Sie als Geschenk zum Mittherbstfest einen CSS-Animationseffekt für die Sonnen-, Erd- und Mondrevolution!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:掘金--Mancuoj. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Einsteigerartikel: So verwenden Sie CSS zum Erstellen von Bild- und Textlayouts (Code-Sharing)Nächster Artikel：Einsteigerartikel: So verwenden Sie CSS zum Erstellen von Bild- und Textlayouts (Code-Sharing)

In Verbindung stehende Artikel

Mehr sehen