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>

查看全文

相关阅读:
spark-2.0.0与hive-1.2.1整合
 kafka_2.11-0.10.0.0安装步骤
 hive-1.2.1安装步骤
 linux时间编程
 gdb与coredump
linux下静态库、动态库的创建与使用
 linux常用工具
 js数组、内置对象、自定义对象
 JS学习五(js中的事件)
JS学习四（BOM DOM）

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