Rumah >hujung hadapan web >tutorial css >Sebagai hadiah Festival Pertengahan Musim Luruh, kongsi kesan animasi revolusi matahari, bumi dan bulan CSS!

Sebagai hadiah Festival Pertengahan Musim Luruh, kongsi kesan animasi revolusi matahari, bumi dan bulan CSS!

青灯夜游ke hadapan: 2021-09-15 10:31:002603semak imbas

Festival Pertengahan Musim Luruh akan datang dalam artikel ini, saya akan berkongsi dengan anda kesan animasi revolusi matahari, bumi dan bulan yang direalisasikan oleh CSS tulen.

Untuk acara Mid-Autumn Festival of the Nuggets ini, saya telah berfikir keras selama dua hari, dan akhirnya memikirkan sesuatu yang tidak pernah dilakukan oleh sesiapa pun dalam Nuggets (mungkin belum selesai) Ayuh, saya pun tidak tahu) - Gunakan HTML CSS untuk mensimulasikan revolusi matahari, bumi dan bulan. [Cadangan berkaitan: "tutorial video css"]

Kita semua tahu bahawa bulan dalam Pesta Pertengahan Musim Gugur adalah besar dan bulat kerana matahari, bumi dan bulan berada dalam garis lurus semasa revolusi mereka Di tengah, matahari dan bulan berada di hujung bumi yang bertentangan Fasa bulan pada hari ini adalah bulan purnama. Perenggan ini boleh dilangkau kerana ia berkaitan dengan Festival Pertengahan Musim Luruh.

Tetapi kerana saya tidak pernah belajar front-end sama sekali, saya belajar semula flexbox dan grid dalam dua hari yang lalu, dan hasilnya harus dikatakan cukup menarik (jika estetika saya adalah tidak menjadi masalah).

Saya cukup suka skema warna, saya harap anda juga menyukainya.

Saya meletakkan kod sumber pada CodePen, pautanSun Earth Moon (codepen.io)

HTML

Intinya ialah CSS, letak tiga div dalam HTML dan ia akan menjadi ok.

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

Latar belakang dan teks

Import fon Lobster kegemaran saya, kemudian tetapkannya kepada putih dan jadikan fon itu nipis sedikit.

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

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

Saya secara rawak menjumpai latar belakang ungu gelap, dan kemudian menetapkan kandungan lukisan itu ke tengah.

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

Animasi Matahari, Bumi dan Bulan

Seperti yang kita sedia maklum: bumi beredar mengelilingi matahari dan bulan beredar mengelilingi bumi.

Apa yang kita lukis ialah revolusi, jadi lukiskan matahari secara langsung dan tambahkan bayang-bayang dan sorotan, dan bulan dan bumi akan berputar.

Perkara yang paling penting sebenarnya adalah padanan warna (terdapat laman web yang disyorkan pada akhir artikel saya mencuba padanan warna untuk masa yang lama, dan akhirnya menggunakan tiga warna kecerunan untuk mewakili matahari,). bumi dan bulan.

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

CSS sepatutnya tidak sukar untuk semua orang, lihat sahaja.

Trek menggunakan sempadan, dan garisan perak digunakan sebagai orbit revolusi.

Animasi menggunakan animasi terbina dalam, yang berputar sekali setiap kali.

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

Ringkasan

Bukan mudah untuk menyertai sesuatu acara, tetapi bahagian hadapannya masih cukup menyeronokkan.

Cadangkan beberapa tapak web tempat saya boleh mencari warna:

Alamat asal: https : //juejin.cn/post/7006507905050492935

Pengarang: Mancuoj

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Sebagai hadiah Festival Pertengahan Musim Luruh, kongsi kesan animasi revolusi matahari, bumi dan bulan CSS!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Artikel ini dikembalikan pada:掘金--Mancuoj. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Artikel pemula: Cara menggunakan CSS untuk mencipta reka letak imej dan teks (perkongsian kod)Artikel seterusnya：Artikel pemula: Cara menggunakan CSS untuk mencipta reka letak imej dan teks (perkongsian kod)

Artikel berkaitan

Lihat lagi