• 55.纯 CSS 创作一个太阳、地球、月亮的运转模型


    原文地址:https://segmentfault.com/a/1190000015313341

    感想:主要运用边框、伪元素、动画。

    HTML code: 

    <div class="container">
        <div class="sun"></div>
        <div class="earth">
            <div class="moon"></div>
        </div>
    </div>

    CSS code:

    html, body {
        margin: 0;
        padding: 0;
    }
    /* 设置body子元素水平垂直居中 */
    body{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
        /* 隐藏突出的部分 */
        overflow: hidden;
    }
    /* 设置.container容器尺寸 */
    .container{
        position: relative;
        font-size: 10px;
        width: 40em;
        height: 40em;
        /* border: 1px solid white; */
    }
    /* 画出太阳 */
    .sun{
        position: absolute;
        top: 15em;
        left: 15em;
        width: 10em;
        height: 10em;
        border-radius: 50%;
        box-shadow: 0 0 3em white;
        background-color: yellow;
    }
    /* 画出地球和月球的轨迹 */
    .earth,
    .earth .moon{
        position: absolute;
        border-width: 0.1em 0.1em 0 0;
        border-style: solid;
        border-color: white transparent transparent transparent;
        border-radius: 50%;
    }
    .earth{
        top: 5em;
        left: 5em;
        width: 30em;
        height: 30em;
        /* border: 1px solid white; */
        /* 设置动画  orbit: 轨道*/
        animation: orbit 36.5s linear infinite;
    }
    .earth .moon{
        top: 0;
        right: 0;
        width: 8em;
        height: 8em;
        /* border: 1px solid white; */
        animation: orbit 2.7s linear infinite;
    }
    @keyframes orbit {
        to {
            transform: rotate(360deg);
        }
    }
    /* 用伪元素画出地球和月球 */
    .earth::before,
    .earth .moon::before{
        position: absolute;
        content: '';
        border-radius: 50%;
    }
    .earth::before{
        top: 2.8em;
        right: 2.5em;
        width: 3em;
        height: 3em;
        background-color: aqua;
    }
    .earth .moon::before{
        top: 0.8em;
        right: 0.2em;
        width: 1.2em;
        height: 1.2em;
        background-color: silver;
    }
  • 相关阅读:
    python三大神器之virtualenv pip, virtualenv, fabric通称为pythoner的三大神器。
    pip使用国内镜像,豆瓣、清华
    pip国内源
    Android原生(Native)C开发之四:SDL移植笔记
    libcurl使用easy模式阻塞卡死等问题的完美解决
    linux 自定义信号
    ubuntu 12.04安装telnet和ssh服务
    libcurl with telnet
    ubuntu使用ssh登入不执行.bashrc解决方法
    pthread_kill
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10611105.html
Copyright © 2020-2023  润新知