zoukankan html css js c++ java

CSS3之太阳系动画效果

效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
    <style type="text/css">
    body{
        background: #000;
    }
    .sun{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
        /*保证居中*/
        transform: translate(-50%;-50%);
        background: yellow;
        border-radius: 50%;
        box-shadow: 0 0 30px 3px gold;
    }
    .earth{
        width: 350px;
        height: 350px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border:1px solid #ccc;
        border-radius: 50%;
        /*animation: whirl 5s linear infinite;*/
    }
    .earth::before{
        content: "";
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-50%,-50%);
        background: #54A6D5;
        border-radius: 50%;
    }
    .moon{
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        /*border:1px solid #ccc;*/
        animation: whirl 5s linear infinite;
    }
    .moon::before{
        content: "";
        width: 15px;
        height: 15px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        background: #F8EDBB;
    }
    .venus{
        width: 500px;
        height: 500px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border:1px solid #ccc;
        border-radius: 50%;
        animation: whirl 8s linear infinite;
    }
    .venus::before{
        content: "";
        width: 30px;
        height: 30px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(-50%,-50%);
        background: #17F056;
        border-radius: 50%;
    }
    .jupiter{
        width: 600px;
        height: 600px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        border:1px solid #ccc;
        animation: whirl 10s linear infinite;
    }
    .jupiter::before{
        content: "";
        width: 35px;
        height: 35px;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        background: red;
    }
    @keyframes whirl{
        0%{
            transform: translate(-50%,-50%) rotate(0deg);
        }
        100%{
            transform: translate(-50%,-50%) rotate(360deg);
        }
    }
    </style>
</head>
<body>
<div class="sun"></div>
<div class="earth">
    <div class="moon"></div>
</div>
<div class="venus"></div>
<div class="jupiter"></div>
</body>
</html>

查看全文

相关阅读:
codeforces #550D Regular Bridge 构造
 java学习路线-Java技术人员之路从0基础到高级
 iOSeasy造成循引用的场景
 Hybird App（一）----第一次接触
 PNP管理器简析--基于ReactOS0.33
为什么寄存器比内存快？
cookie 与 session 的差别、联系
 webstorm 配合IIS使用
 js实现可拉伸移动的div
无法识别的属性“targetFramework”。请注意属性名称区分大小写

原文地址：https://www.cnblogs.com/creazybeauty/p/8488393.html