首页 > 其他分享> > css行星旋转无脚本
css行星旋转无脚本

2021-02-14 22:01:05 作者：互联网
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Planet</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
            background: #204;
            overflow: hidden;
        }

        .bg * {
            line-height: 0;
        }

        .bg span {
            position: absolute;
            display: inline-block;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .bg div {
            position: absolute;
            top: 50%;
            left: 61.8%;
            transform-origin: 0 0;
            animation-name: planet;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        @keyframes planet {
            from {
                transform: rotate(0) translate(-50%, -50%) scale(0.5);
            }

            to {
                transform: rotate(360deg) translate(-50%, -50%) scale(0.5);
            }
        }

        .sun {
            position: absolute;
            display: inline-block;
            transform: translate(-50%, -50%);
            width: 75px;
            height: 75px;
            text-align: center;
            background-color: #fdf3c2;
            box-shadow: 0 0 80px #ff0;
            border-radius: 100%;
        }

        .sun-light {
            position: absolute;
            display: inline-block;
            transform: translate(-50%, -50%);
            width: 75px;
            height: 75px;
            text-align: center;
            background-color: #fdf3c2;
            box-shadow: 0 0 150px #f80;
            border-radius: 100%;
        }

        .mercury {
            animation-duration: 2s;
            font-size: 24px;
            width: 90px;
            height: 90px;
            color: #eeca8e;
            text-shadow: 0 0 40px #fff;
        }

        .venus {
            animation-duration: 3s;
            font-size: 48px;
            width: 140px;
            height: 140px;
            color: #feeebb;
            text-shadow: 0 0 50px #fff;
        }

        .earth {
            animation-duration: 5s;
            font-size: 48px;
            width: 220px;
            height: 220px;
            color: #60e1ff;
            text-shadow: 0 0 50px #0ff;
        }

        .moon {
            animation-duration: 2s;
            font-size: 20px;
            width: 80px;
            height: 80px;
            color: #e2e2e2;
            text-shadow: 0 0 20px #fff;
        }

        .mars {
            animation-duration: 11s;
            font-size: 24px;
            width: 320px;
            height: 320px;
            color: #ff6840;
            text-shadow: 0 0 40px #f00;
        }

        .jupiter {
            animation-duration: 19s;
            font-size: 96px;
            width: 460px;
            height: 460px;
            color: #fcbabc;
            text-shadow: 0 0 100px #fcc;
        }

        .io {
            animation-duration: 2s;
            width: 100px;
            height: 100px;
            font-size: 12px;
            color: #e2e2e2;
        }

        .europa {
            animation-duration: 3s;
            width: 125px;
            height: 125px;
            font-size: 12px;
            color: #e2e2e2;
        }

        .ganymede {
            animation-duration: 5s;
            font-size: 18px;
            color: #e2e2e2;
            width: 150px;
            height: 150px;
            text-shadow: 0 0 30px #fff;
        }

        .callisto {
            animation-duration: 7s;
            width: 200px;
            height: 200px;
            font-size: 12px;
            color: #e2e2e2;
        }

        .saturn {
            animation-duration: 41s;
            font-size: 64px;
            width: 640px;
            height: 640px;
            color: #f5d57e;
            text-shadow: 0 0 100px #ec8;
        }
    </style>
    <style>
        .login-form {
            position: absolute;
            top: 50%;
            left: 38.2%;
            transform: translate(-50%, -50%);
            background-color: #fff2;
            color: #fff;
            border-radius: 10px;
            font-size: 18pt;
        }
        .login-title{
            margin: 10px 15px;
        }
        .button-padding{
            padding: 10px 15px;
        }
        .button-margin{
            margin: 10px 15px;
        }
        input {
            width: 350px;
            font-size: inherit;
            display: block;
            background-color: #fff2;
            outline: none;
            border: 0;
            color: inherit;
            border-radius: 10px;
        }
        button{
            font-size: inherit;
            background-color: #fff2;
            outline: none;
            border: 0;
            color: inherit;
            border-radius: 1em;
        }
    </style>
</head>

<body>
    <div class="bg">
        <div class="mercury">
            <span>⬤</span>
        </div>
        <div class="venus">
            <span>⬤</span>
        </div>
        <div class="earth">
            <div class="moon" style="top:0;left:0;"><span>⬤</span></div>
            <span>⬤</span>
        </div>
        <div class="mars">
            <span>⬤</span>
        </div>
        <div class="jupiter">
            <div class="io" style="top:0;left:0;"><span>⬤</span></div>
            <div class="europa" style="top:0;left:0;"><span>⬤</span></div>
            <div class="ganymede" style="top:0;left:0;"><span>⬤</span></div>
            <div class="callisto" style="top:0;left:0;"><span>⬤</span></div>
            <span>⬤</span>
        </div>
        <div class="saturn">
            <span>⬤</span>
        </div>
        <div>
            <span class="sun-light"></span>
            <span class="sun"></span>
        </div>
    </div>
    <form class="login-form">
        <input name="name" class="button-padding button-margin" placeholder="输入用户名">
        <input name="phone" class="button-padding button-margin" placeholder="输入手机号">
        <button class="button-padding button-margin">验证码</button>
        <input name="code" class="button-padding button-margin" style="display: inline;width: 200px;float: right;" placeholder="输入验证码">
        <input name="password" class="button-padding button-margin" placeholder="输入密码">
        <input class="button-padding button-margin" placeholder="再次输入密码">
        <button class="button-padding button-margin" style="float: right;">立刻注册</button>
    </form>
</body>

</html>
标签：font,color,height,width,animation,行星,旋转,css,size
来源： https://blog.csdn.net/dscn15848078969/article/details/113811102
css行星旋转 无脚本

css行星旋转无脚本
