5

纯CSS实现日地月的公转效果

 1 year ago
source link: https://www.fly63.com/article/detial/12300
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

html

重点是css，HTML放上三个 div 就OK了。

<!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 应该难不到大家，随便看看吧。

轨道用到了 border，用银色线条当作公转的轨迹。

动画用到了自带的 animation ，每次旋转一周。

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK