代码：

<!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. Bootstrap之Carousel不能自动播放的解决办法(转)

    Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强. 用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了 ...

  2. jmx相关资料

    http://www.ibm.com/developerworks/cn/java/j-lo-jse63/ http://blog.csdn.net/javafreely/article/detail ...

  3. mongo 相关命令

    mongo导入数据: 1. 先进入找到mongo 安装目录 执行 ./mongo 进入mongo 2. mongorestore -u 用户名 -p 密码 -d 数据库 —drop 文件存在路径 显示 ...

  4. Java数组扩容算法及Java对它的应用

    1)Java数组对象的大小是固定不变的,数组对象是不可扩容的.利用数组复制方法可以变通的实现数组扩容.System.arraycopy()可以复制数组.Arrays.copyOf()可以简便的创建数组 ...

  5. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  6. eclipse svn提交报错

    修改文件格式:右键-properties-text file encoding-other UTF-8

  7. C # 数据绑定（1）——将DataTabel的data添加ListView

    文/嶽永鹏 目标界面: 功能:通过响应UI Textbox 的值向ListView 绑定新添加的纪录. UI XAML 代码 <Grid Margin="5"> < ...

  8. Takeown--夺取文件or文件夹所有权

    强制将当前目录下的所有文件及文件夹.子文件夹下的所有者更改为管理员组(administrators)命令:takeown /f * /a /r /d y 将所有d:\documents目录下的文件.子 ...

  9. SHAREPOINT 2013 列表之间相互关联

    修改内容 1.增加列表设置,隐藏Aid字段操作 SharePoint 列表之间相互关联 例如两张列表之间的父子关系. 思路如下: 列表中新增列表项后会有一个唯一的ID,我们获取到该ID赋予子表即可将两 ...

  10. C++ void*的使用

    void*类型可以存储任何类型的指针,使用的时候强制转化成对应类型的指针便可. #include <iostream> #include <vector> using name ...