중추절 선물로 CSS 태양, 지구, 달 회전 애니메이션 효과를 공유하세요!-CSS 튜토리얼-php.cn

중추절 선물로 CSS 태양, 지구, 달 회전 애니메이션 효과를 공유하세요!

青灯夜游

풀어 주다： 2021-09-23 09:50:14

앞으로

2561명이 탐색했습니다.

추석이 곧 다가옵니다. 이 글에서는 순수 CSS로 구현한 해, 땅, 달의 회전 애니메이션 효과를 여러분과 공유하겠습니다.

중추절 선물로 CSS 태양, 지구, 달 회전 애니메이션 효과를 공유하세요!

이번 너겟의 추석 행사를 위해 이틀 동안 고민을 하다가 드디어 너겟에서 누구도 해본 적 없는 일이 생각났습니다. 모릅니다)—— HTML+CSS를 사용하여 태양, 지구, 달의 회전을 시뮬레이션합니다. [관련 추천: "css 동영상 튜토리얼"]

중추절 달이 크고 둥글다는 것은 우리 모두 알고 있습니다. 왜냐하면 태양, 지구, 달이 공전하는 동안 지구가 중심에 직선을 이루기 때문입니다. 가운데, 태양, 달은 각각 지구의 양쪽 끝에서 이 날의 달의 위상은 보름달입니다. 이 문단은 중추절과 관련이 있기 때문에 건너뛸 수 있습니다.

하지만 저는 프론트엔드를 전혀 배운 적이 없어서 지난 이틀 동안 flexbox와 grid를 다시 배웠는데 결과가 꽤 좋았다고 해야 할까요. (나의 미관상 문제가 없다면). flexbox 和 grid ，成果应该说还挺好看（如果我的审美没有问题的话）。

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

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

HTML

重点是CSS，HTML放上三个 div

색상이 정말 맘에 드네요. 여러분도 마음에 드셨으면 좋겠습니다.

코드펜에 소스코드를 올려놓고 Sun Earth Moon(codepen.io)을 링크해주세요 )

HTML

핵심은 CSS입니다. HTML에 div 3개를 넣으면 괜찮습니다.

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

로그인 후 복사

배경 및 텍스트

내가 가장 좋아하는 랍스터 글꼴을 가져온 다음 흰색으로 설정하고 글꼴을 조금 더 얇게 만듭니다.

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

로그인 후 복사

Sun, Earth and Moon Animation

우리 모두 알고 있듯이 지구는 태양을 중심으로 회전하고 달은 지구를 중심으로 회전합니다. 우리가 그리는 것은 혁명이므로 태양을 직접 그리고 그림자와 하이라이트만 추가하면 달과 지구가 회전하게 됩니다. 실제로 가장 중요한 것은 컬러 매칭입니다. (추천 사이트는 글 마지막에 있습니다.) 오랫동안 컬러 매칭을 실험해 본 결과, 마침내 세 가지 그라데이션 색상을 사용하여 태양, 지구, 달을 표현했습니다.

日: 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);
}

로그인 후 복사

요약

이벤트 참여가 쉽지는 않지만 그래도 프론트엔드는 꽤 재미있습니다. colors 내가 색상을 찾는 몇 가지 웹 사이트를 권장합니다. Color Hunt
中國color - Traditional Chinese Colors (zhongguose.com)
Palettes | 플랫 UI 색상 복사 및 붙여넣기가 가능한 280가지 엄선된 색상
머티리얼 디자인 색상, 색상 팔레트 | Material UI
원본 주소: https://juejin.cn/post/7006507905050492935저자: Mancuoj