月球旋转动画-html代码-BFW代码库

月球旋转动画

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> - Earth orbit CSS animation</title>
    <style>
        html, body {
            /* The universe takes up all available space */
            width: 100%;
            height: 100vh;
            overflow: hidden;

            /* The universe is black */
            background-color: black;
        }

        #sun {
            position: absolute;
            /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
            top: 50%;
            left: 50%;

            /* Play with these numbers to see what it does */
            height: 200px;
            width: 200px;
            margin-top: -100px;
            margin-left: -100px;

            border-color: orange;
            border-width: 1px;
            border-style: solid;
            border-radius: 50%;

            box-shadow: 0 0 128px red;
            background: yellow;
        }

        #earth {
            /* Style your earth */
            position: absolute;
            top: 0;
            left: 50%;

            height: 50px;
            width: 50px;
            margin-left: -25px;
            margin-top: -25px;

            border-color: blue;
            border-width: 0px;
            border-style: solid;
            border-radius: 50%;

            -webkit-box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.5);
            -moz-box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.5);
            box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.5);
            background: lightblue;
        }

        #earth-orbit {
            /* For Section #2 */
            position: absolute;
            top: 50%;
            left: 50%;

            width: 650px;
            height: 500px;
            margin-top: -250px;
            margin-left: -250px;

            border-width: 0px;
            border-style: dotted;
            border-color: white;
            border-radius: 50%;

            -webkit-animation: spin-right 10s linear infinite;
            -moz-animation: spin-right 10s linear infinite;
            -ms-animation: spin-right 10s linear infinite;
            -o-animation: spin-right 10s linear infinite;
            animation: spin-right 10s linear infinite;
        }

        #moon {
            /* Style your earth */
            position: absolute;
            top: 0;
            left: 50%;

            height: 20px;
            width: 20px;
            margin-left: -25px;
            margin-top: -25px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            border-radius: 15px;

            -webkit-box-shadow: 1px 1px 16px 0px rgba(255, 255, 255, .6);
            -moz-box-shadow: 1px 1px 16px 0px rgba(255, 255, 255, .6);
            box-shadow: 1px 1px 16px 0px rgba(255, 255, 255, .6);
            background: lightgray;
        }

        #moon-orbit {
            /* For Section #2 */
            position: absolute;
            top: 50%;
            left: 50%;

            width: 110px;
            height: 80px;
            margin-top: -285px;
            margin-left: -45px;

            border-width: 0px;
            border-style: dotted;
            border-color: .........完整代码请登录后点击上方下载按钮下载查看