zoukankan      html  css  js  c++  java
  • html5——动画案例(太阳系)

    太阳系主要利用定位,伪元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            html, body {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
    
            body {
                background-color: #000;
            }
    
            .sun {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -40px;
                margin-top: -40px;
                background-color: orange;
                box-shadow: 0px 0px 30px 2px yellow;
            }
    
            .earth {
                width: 300px;
                height: 300px;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -150px;
                margin-top: -150px;
                border: 1px solid #fff;
                animation: gun 10s infinite linear;
            }
    
            .earth::before {
                content: "";
                position: absolute;
                width: 40px;
                height: 40px;
                top: 50%;
                margin-top: -20px;
                left: -20px;
                border-radius: 50%;
                background-color: blue;
            }
    
            .moon {
                position: absolute;
                width: 100px;
                height: 100px;
                top: 50%;
                margin-top: -50px;
                left: -50px;
                border-radius: 50%;
                /*border: 1px solid #fff;*/
                animation: gun 2.5s infinite linear;
            }
    
            .moon:before {
                content: "";
                position: absolute;
                width: 18px;
                height: 18px;
                top: 50%;
                margin-top: -9px;
                left: -9px;
                border-radius: 50%;
                background-color: silver;
            }
    
            .mars {
                width: 460px;
                height: 460px;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -230px;
                margin-top: -230px;
                border: 1px solid #fff;
                animation: gun 15s infinite linear;
            }
    
            .mars::before {
                content: "";
                position: absolute;
                width: 50px;
                height: 50px;
                top: 50%;
                margin-top: -25px;
                left: -25px;
                border-radius: 50%;
                background-color: orange;
            }
    
            .venus {
                width: 600px;
                height: 600px;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -300px;
                margin-top: -300px;
                border: 1px solid #fff;
                animation: gun 20s infinite linear;
            }
    
            .venus::before {
                content: "";
                position: absolute;
                width: 60px;
                height: 60px;
                top: 50%;
                margin-top: -30px;
                left: -30px;
                border-radius: 50%;
                background-color: silver;
            }
    
            @keyframes gun {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
    <div class="sun"></div>
    <div class="earth">
        <div class="moon"></div>
    </div>
    <div class="mars"></div>
    <div class="venus"></div>
    </body>
    </html>

    参考资料:cssRules  js操作cssRules  

  • 相关阅读:
    Linux内核同步方法
    C++11写轻量级AOP框架
    Typora夜樱主题
    MySQL添加主键和外键
    命题连接词和命题逻辑
    打印一个类全部信息的方法
    getClass()和instanceof以及类的equals方法
    多态
    在构造函数中调用另一个构造函数
    参数传递
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/8079409.html
Copyright © 2011-2022 走看看