代码：

<!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;width: 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>

CSS之过渡简单应用—日落西山的更多相关文章

  1. css制作最简单导航栏

    css制作最简单导航栏

  2. css动画过渡

    css动画过渡css代码: .div03{ width:100px;height:100px;background: rebeccapurple;color: #fff; -webkit-transi ...

  3. 【CSS】过渡、动画和变换

    1. 使用过渡 过渡效果一般是由浏览器直接改变元素的CSS属性实现的.例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性. <!DOCTYPE ht ...

  4. JS+css滑动菜单简单实现

    JS+css滑动菜单 制作一个简单的滑动菜单,当鼠标指向菜单标题时,滑出二级菜单.移开时二级菜单隐藏.目标很简单,实践时有一些细节需要注意,比如鼠标移向二级菜单的 过程中,二级菜单消失了.还有定位出错 ...

  5. css定位的简单总结

    关于css的定位,相信初接触css的同学都头疼不已.相对定位.绝对定位连名字都这么像,用起来更是一会被遮住一会被挤出去,踩了很多坑之后,对css的定位进行一个简单的总结,以免重蹈覆辙. 其实掌握好几种 ...

  6. CSS transition 过渡 详解

    transition 过渡 IE10.Firefox.Chrome.Opera 支持 transition 属性. Safari 需要前缀 -webkit-. Chrome 25 以及更早版本需要前缀 ...

  7. CSSの神小结-简单备忘一下(亲测可用)

    css 选择器优先级,标签>id>class 权重 id>class>标签 只记录能想到的以免遗忘: 1.字体css可继承 2.表格:表格细线的合并,表格单元格合并,单元格内容 ...

  8. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

  9. CSS学习------之简单图片切换

    最近一直在重温纯CSS,学习的时候真的才发现,css真的博大精深啊! 所以趁着学习的劲头,谢了个最简单的CSS图片切换! 先整理下思路: 首先我希望图片居中间,两边有个切换按钮,点击按钮的时候,可以实 ...

随机推荐

  1. Spring的注解方式实现AOP

    Spring对AOP的实现提供了很好的支持.下面我们就使用Spring的注解来完成AOP做一个例子. 首先,为了使用Spring的AOP注解功能,必须导入如下几个包.aspectjrt.jar,asp ...

  2. JQuery_DOM 节点操作之创建节点、插入节点

    一.创建节点 为了使页面更加智能化,有时我们想动态的在html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点 <script type="text/javasc ...

  3. 在linux上配置并创建JavaFX项目

    本环境为linux配置,因为这里的JavaFX项目是为定制Oracle监控工具而写的.现Oracle已收购Java好几年,用它自己的产生监控自己的东西还是很兼容的.此处Eclipse 为4.5版本. ...

  4. zookeeper 安装 测试及集群

    centos 安装 zookeeper-3.5.2-alpha.tar.gz 网上搜索了 一下 安装教程 其实很简单 主要总结一下 中间遇到的坑 1.zookeeper 3.4.6 启动失败. 很有可 ...

  5. Apache Commons Chain

    http://commons.apache.org/proper/commons-chain/ http://commons.apache.org/proper/commons-chain/cookb ...

  6. Linux下配置Node.js环境

    1.下载代码 下载地址:https://nodejs.org/en/download/ 下载Linux Binaries (.tar.xz)版本,位数根据操作系统位数选择 2.复制代码包 用FTP上传 ...

  7. GbkToUtf8 Utf8ToGbk PackHttp

    void CFunc::GbkToUtf8(CString &strGBK) { , (LPCTSTR)strGBK, -, NULL, ); unsigned ]; memset(wszUt ...

  8. linux环境下android-ndk下的ffmpeg编译

    目前正在做手机底层播放器对的开发,需要用的ffmpeg,因为是新手,所以先从ffmpeg的编译开始做起.虽然是在前人的基础上,但是在linux上编译确实头一遭,因此在编译中,总有些坑是必须要填的,下面 ...

  9. category - junit用例分组执行

    一.category 和 testSuite的比较 (1)testSuite是类级分组(xx.class) (2)category是用例级分组(@Test) (3)category是testSuite ...

  10. MVC5+EF6 入门完整教程八

    本篇是相对独立的一篇,主要讲解不丢失数据进行数据库结构升级. 前面我们讲解EF功能时,已经介绍过一种更新数据库的方式: EF比较model和database,如果两边不一致,程序将会drop and ...