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>

  • 相关阅读:
    转: PHP的"::"、"->"和"=>"的区别
    PHP命名空间
    PHP+MySQL数据库编程的步骤
    SQL基础
    Mysql的CMD操作
    Apache服务器配置
    【网关】SpringCloud-Gateway
    Oracle表分区
    MongoDB---分片
    MongoDB-BSON
  • 原文地址:https://www.cnblogs.com/KJ-Z/p/5666375.html
Copyright © 2011-2022 走看看