zoukankan      html  css  js  c++  java
  • CSS之过渡简单应用—日落西山

    代码:

    <!DOCTYPE html>
    <html>
    <head>
    <title>日落西山</title>
    <meta charset="utf-8">
    <style type="text/css">
    .BK{height: 800px;border: 1px solid black; position: relative;overflow: hidden;animation: bj 10s linear infinite}
    .sun{height: 300px; 300px;border-radius: 100%;background-color: red; position: absolute; top: 800px;animation: light 10s linear infinite;}
    @keyframes light{
    0%{box-shadow:0px 0px 100px white;transform: translate(0px,0px)}
    20%{box-shadow:0px 0px 200px white;transform: translate(200px,-200px)}
    40%{box-shadow:0px 0px 200px yellow;transform: translate(400px,-400px)}
    50%{box-shadow:0px 0px 200px yellow;transform: translate(500px,-500px)}
    60%{box-shadow:0px 0px 100px yellow;transform: translate(600px,-400px)}
    80%{box-shadow:0px 0px 100px yellow;transform: translate(800px,-200px)}
    100%{box-shadow: 0px 0px 200px white;transform: translate(1000px,0px)}
    }
    @keyframes bj{
    0%{background-color: black;}
    20%{background-color: #C4C2C7;}
    50%{background-color: white;}
    80%{background-color: #C4C2C7;}
    100%{background-color: black;}
    }
    </style>
    </head>
    <body>
    <div class="BK">
    <div class="sun"></div>
    </div>
    </body>
    </html>

  • 相关阅读:
    BCP 命令
    模板复习【updating】
    bzoj3716/4251 [PA2014]Muzeum
    bzoj4318 OSU!
    uoj308 【UNR #2】UOJ拯救计划
    bzoj4695 最假女选手
    省队集训 Day7 选点游戏
    hdu5828 Rikka with Sequence
    bzoj2482 [Spoj1557] Can you answer these queries II
    省队集训 Day6 序列
  • 原文地址:https://www.cnblogs.com/KJ-Z/p/5666375.html
Copyright © 2011-2022 走看看