[Праздник середины осени] Pure CSS реализует революцию солнца, земли и луны

внешний интерфейс CSS
[Праздник середины осени] Pure CSS реализует революцию солнца, земли и луны

Я участвую в творческом конкурсе «Праздник середины осени».Творческий конкурс «Праздник середины осени»

предисловие

GIF.gif

Что касается события «Праздник середины осени» у «Наггетс», я два дня усиленно думал и, наконец, придумал то, чего еще никто не делал в «Наггетс» (это вообще не должно было быть сделано, я не знаю) — Моделирование с помощью HTML+CSS. Вращение солнца, земли и луны.

Все мы знаем, что луна на празднике середины осени большая и круглая, потому что солнце, земля и луна во время обращения находятся на одной прямой, земля находится посередине, а солнце и луна на противоположных концах земли.Фаза луны в этот день – полнолуние. Этот абзац можно пропустить, потому что он как-то связан с Праздником середины осени.

Но поскольку я вообще не изучал интерфейс, я восполнил это за последние два дня и выучил заново.flexboxа такжеgridСледует сказать, что результаты должны быть довольно хорошими (если у моей эстетики нет проблем).

Мне нравится цветовая гамма, надеюсь, вам понравится.

Выкладываю исходники на CodePen, ссылкаSun Earth Moon (codepen.io)

HTML

В центре внимания CSS, HTML на трехdivПросто 🆗.

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

    <body>
        <h1>Mancuoj</h1>
        <figure class="container">
            <div class="sun"></div>
            <div class="earth">
                <div class="moon"></div>
            </div>
        </figure>
    </body>
</html>

фон и текст

Импортируйте мой любимый шрифт Lobster, затем сделайте его белым и тоньше.

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

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

Я случайным образом нашел темно-фиолетовый фон, а затем установил содержание картины посередине.

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

Анимация Солнца, Земли и Луны

Как мы все знаем: Земля вращается вокруг Солнца, а Луна вращается вокруг Земли.

То, что мы рисуем, это революция, солнце рисуется прямо и добавляется теневой блик, а луну и землю можно вращать.

Самое главное - это подбор цветов (в конце статьи есть рекомендуемый сайт) Я долго экспериментировал с подбором цветов и, наконец, использовал три градиентных цвета для изображения солнца, земли и луны.

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

CSS не должен быть сложным для всех, просто взгляните.

На трассе используется граница, а серебряная линия используется как орбита вращения.

Анимация использует встроенную анимацию, которая крутится каждую неделю.

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

Суммировать

Участвовать в событии непросто, но внешний интерфейс по-прежнему веселый.

Посоветуйте несколько сайтов, где я ищу цвета:

  1. Бесплатный градиентный фон в стиле CSS3 | oulu.me

  2. uiGradients - Beautiful colored gradients

  3. Color Palettes for Designers and Artists - Color Hunt

  4. Китайские цвета - традиционные китайские цвета (zhongguose.com)

  5. Палитры | Плоские цвета пользовательского интерфейса 🎨 280 выбранных вручную цветов, готовых для КОПИРОВАТЬ И ВСТАВИТЬ

  6. 🎨 Цвета дизайна материалов, цветовая палитра | Пользовательский интерфейс материалов

Смотрите все здесь, нажмите 👍~

Добро пожаловать, чтобы следить и общаться друг с другом 💖💖 Если у вас есть какие-либо вопросы, вы можете прокомментировать и оставить сообщение, и я обязательно отвечу!

Я Манкуой, еще интересные статьи:Личная страница Манкуоя

Категории