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

查看全文

相关阅读:
我理解的 js 异步成长总结
 小程序获取地理位置-- wx.getLocation
H5页面在微信端的分享
 ES6 我的总结学习
 5 分钟掌握 JS 实用窍门技巧，帮你快速撸码--- 删除数组尾部元素、E6对象解构、async/await、操作平铺嵌套多维数组等
 小程序 video 层级，原生组件
 React 事件传参
 微信小程序中如何使用setData --- 修改数组对象、修改对象
 流氓式--小程序用户授权 --- 小程序授权、获取用户信息
 深度学习的反向传播笔记

原文地址：https://www.cnblogs.com/wuqiuxue/p/8079409.html