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>
  • 相关阅读:
    【Base64】用 js 编 解 码 base64
    【ecshop】调用购物车商品数量
    【LNMP】 fileinfo扩展安装
    【Twitter接口】网站嵌入推特信息
    【新浪微博接口】网站接入微博秀
    【Node.js】Mac 下安装node图文详解
    【Select2】带搜索框的下拉框美化插件
    Java中食之无味弃之可惜的数组
    当我谈过年时,我该谈些什么?
    我没回老家过春节的那4点原因
  • 原文地址:https://www.cnblogs.com/creazybeauty/p/8488393.html
Copyright © 2011-2022 走看看