找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发效果_小小太阳系

2018-12-05 分类：教程 阅读(719) 评论(0)
前端开发使用软件
常用前端软件开发软件
前端软件开发环境有哪些问题

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style>
            @keyframes rotate {
                100% {
                    transform: rotate(360deg);
                }
            }
            #main {
                width: 300px;
                height: 300px;
                margin: 200px auto;
                position: relative;
                /*animation: rotate 2s infinite linear;*/
            }
            #shuiline {
                position: absolute;
                height: 100px;
                width: 100px;
                border: 2px solid black;
                border-radius: 50%;
                top: 74px;
                left: 125px;
                display: flex;
                animation: rotate 3s infinite linear;
            }
            #jinline {
                position: absolute;
                height: 160px;
                width: 160px;
                border: 2px solid black;
                border-radius: 50%;
                top: 45px;
                left: 95px;
                display: flex;
                animation: rotate 7s infinite linear;
            }
            #earthline {
                position: relative;
                height: 250px;
                width: 250px;
                border: 2px solid black;
                border-radius: 50%;
                margin: 50px 0 0 50px;
                display: flex;
                animation: rotate 10s infinite linear;
            }
            #huoline {
                position: absolute;
                height: 350px;
                width: 350px;
                border: 2px solid black;
                border-radius: 50%;
                top: -53px;
                left: 0px;
                display: flex;
                animation: rotate 20s infinite linear;
            }
            #muline {
                position: absolute;
                height: 460px;
                width: 460px;
                border: 2px solid black;
                border-radius: 50%;
                top: -103px;
                left: -54px;
                display: flex;
                animation: rotate 50s infinite linear;
            }
            #sun {
                width: 50px;
                height: 50px;
                margin: auto;
                background: red;
                border-radius: 50%;
            }
            #moonline {
                position: absolute;
                right: 0;
                top: 50%;
                height: 50px;
                width: 50px;
                margin: -25px -25px 0 0;
                border: 1px solid black;
                border-radius: 50%;
                display: flex;
                animation: rotate 3s infinite linear;
            }
            #shui {
                width: 25px;
                height: 25px;
                background: #ffe4b5;
                position: absolute;
                left: 53px;
                top: -12px;
                border-radius: 50%;
            }
            #jin {
                width: 25px;
                height: 25px;
                background: #ee9a00;
                position: absolute;
                left: 53px;
                top: -12px;
                border-radius: 50%;
            }
            #earth {
                width: 30px;
                height: 30px;
                background: blue;
                margin: auto;
                border-radius: 50%;
            }
            #huo {
                width: 22px;
                height: 22px;
                background: #8b6508;
                position: absolute;
                left: 42%;
                top: -3%;
                border-radius: 50%;
            }
            #mu {
                width: 36px;
                height: 36px;
                background: #8b6508;
                position: absolute;
                left: 42%;
                top: -4%;
                border-radius: 50%;
            }
            #moon {
                position: absolute;
                left: 0;
                top: 50%;
                height: 14px;
                width: 14px;
                margin: -7px 0 0 -7px;
                background-color: black;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div id=”main”>
            <div id=”shuiline”><div id=”shui”></div></div>
            <div id=”jinline”><div id=”jin”></div></div>
            <div id=”earthline”>
                <div id=”sun”></div>
                <div id=”moonline”>
                    <div id=”earth”></div>
                    <div id=”moon”></div>
                </div>
            </div>
            <div id=”huoline”><div id=”huo”></div></div>
            <div id=”muline”><div id=”mu”></div></div>
        </div>
    </body>
</html>
前端开发常用软件
前端开发必备的一些软件
h5前端开发 软件
赞(0)
前端开发者 » 前端开发效果_小小太阳系
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论