代码：

<!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. 要当好JavaScript程序员:5个debug技巧

    我一直使用printf调试程序,一般来说都是比较顺利,但有时候,你会发现需要更好的方法.下面几个JavaScript技巧相信你一定会觉得十分有用: 1. debugger; 我以前也说过,你可以在Ja ...

  2. 大数据运算模型 MapReduce 原理

    大数据运算模型 MapReduce 原理 2016-01-24 杜亦舒 MapReduce 是一个大数据集合的并行运算模型,由google提出,现在流行的hadoop中也使用了MapReduce作为计 ...

  3. numpy函数白板

    numpy.linspace(start, stop, num=50, endpoint=True, retstep=False) start 起始位置 stop 终止位置 num 个数 endpoi ...

  4. Evolutionary Computing: [reading notes]On the Life-Long Learning Capabilities of a NELLI*: A Hyper-Heuristic Optimisation System

    resource: On the Life-Long Learning Capabilities of a NELLI*: A Hyper-Heuristic Optimisation System ...

  5. html的a链接的href怎样才另起一个页面

    在后面加上target ="_blank",就可以,正如: <ul class="nav navbar-nav navbar-right" style=& ...

  6. 利用node来下载图片到本地

      本文是针对于知道图片地址的下载图片方法. 同时也是我的处男作(额,怪怪的〜);不要在意这些细节. 最近在弄项目迁移,需要把http的链接全换成https的:以前的cms不支持http的协议,然后就 ...

  7. mac命令学习记录

    1. 查找程序运行路径: which xxxx 2. 查找文件安装路径: whereis xxxx; 3. 编辑配置文件:vi ./.xxx : 进入需要编辑的文件: i  进行编辑  :输入:wq ...

  8. 解决UIButton 连续点击重复响应事件问题

    经常会遇到重复点击某个按钮 事件被响应多次的情景, 有时候可能对程序本身并没有什么影响 , 可有时候偏偏需要限制button响应事件直接的间隔 . 方法一 : 标记 1 . 利用空闲enable属性来 ...

  9. sessionStorage 、localStorage 与cookie 的异同点

    cookie 容量4kb,默认各种浏览器都支持,缺陷就是每次请求,浏览器都会把本机存的cookies发送到服务器,无形中浪费带宽.userdata,只有ie支持,单个容量64kb,每个域名最多可存10 ...

  10. 关于css

    已经学了四天的css.现在对于css的了解还很肤浅,首先,我对基础的还不是很了解. 级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Shee ...