zoukankan      html  css  js  c++  java
  • 使用css3 实现太阳升起落下效果

    <!DOCTYPE html>
    <html style="overflow: hidden">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
    body
    {
    100%;
    height: 100%;
    background-image: url("img/pop.jpg");
    }
    div
    {
    50px;
    height: 50px;
    border-radius:100% ;
    background: #FFE100;
    position: relative;
    top:700px;
    left: -120px;
    box-shadow: 0 0 20px #FA940A, 0 0 50px #FF0000;
    -webkit-animation:movie 10s linear infinite;/*动画名称 播放时间 播放动画的方式 动画播放次数*/
    }
    @-webkit-keyframes movie {
    0%{
    margin-left: 192px;
    margin-top: -140px;
    }
    10%{
    margin-left: 384px;
    margin-top: -280px;
    }
    20%{
    margin-left: 576px;
    margin-top: -420px;
    }
    30%{
    margin-left: 768px;
    margin-top: -560px;
    }
    40%{
    margin-left: 950px;
    margin-top: -650px;
    }
    50%{
    margin-left: 1142px;
    margin-top: -700px;
    }
    60%{
    margin-left: 1334px;
    margin-top: -650px;
    }
    70%{
    margin-left: 1426px;
    margin-top: -560px;
    }
    80%{
    margin-left: 1618px;
    margin-top: -420px;
    }
    90%{
    margin-left: 1810px;
    margin-top: -280px;
    }
    100%{
    margin-left: 2020px;
    margin-top: -140px;
    }
    }


    </style>
    </head>
    <body>

    <div></div>

    </body>
    </html>

  • 相关阅读:
    verilog RTL编程实践之四
    TB平台搭建之二
    hdu3466 Proud Merchants
    poj2411 Mondriaan's Dream (用1*2的矩形铺)
    zoj3471 Most Powerful
    poj2923 Relocation
    hdu3001 Travelling
    poj3311 Hie with the Pie
    poj1185 炮兵阵地
    poj3254 Corn Fields
  • 原文地址:https://www.cnblogs.com/ZH1132672711/p/5606628.html
Copyright © 2011-2022 走看看