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>

查看全文

相关阅读:
译 PrestaShop开发者指南第三篇设置本地安装环境
 译 PrestaShop开发者指南第二篇代码规范
 [译]PrestaShop开发者指南第一篇基础
 Discuz!X3解读之类引入机制及目录结构
 Discuz的缓存体系
 x3d 规范在线镜像版
 大容量数据库对表做分割
 链表队列堆栈视频
 How ASP.NET MVC Works?
SQLServer查看和解决死锁的方法

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