代码：

<!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. static 作用

    静态,定义静态变量或者静态函数的时候使用该关键字. 被定义为static的函数,可以不需要new一个新类别而直接调用 比如Math类里有一个,public static sub()方法,那么你可以直接 ...

  2. Java集合框架

    集合框架体系如图所示 Java 集合框架提供了一套性能优良,使用方便的接口和类,java集合框架位于java.util包中, 所以当使用集合框架的时候需要进行导包. Map接口的常用方法 Map接口提 ...

  3. mysql 基础篇5（mysql语法---数据）

    6 增删改数据 -- ********一.增删改数据********* --- -- 1.1 增加数据 -- 插入所有字段.一定依次按顺序插入 INSERT INTO student VALUES(1 ...

  4. spring框架学习（五）注解

    注解Annotation,是一种类似注释的机制,在代码中添加注解可以在之后某时间使用这些信息.跟注释不同的是,注释是给我们看的,Java虚拟机不会编译,注解也是不编译的,但是我们可以通过反射机制去读取 ...

  5. python3 不同目录间模块调用

    #Author by Andy #_*_ coding:utf-8 _*_ #__file__获取当前程序的相对路径 import os,sys #print(__file__) # os.path. ...

  6. 005_kafka_Java_API

    1.生产者Producer 1)添加依赖 <dependency> <groupId>org.apache.kafka</groupId> <artifact ...

  7. Java—Servlet技术

    1  Servlet 概述 Servlet简介——开发动态web资源的技术Sun公司在API提供了一个servlet接口,如开发一个java程序向浏览器输出数据:1)编写一个java类,实现servl ...

  8. VGA, QVGA, HVGA, WVGA, FWVGA和iPhone显示分辨率

    首先这些都是说的屏幕显示分辨率 VGA (Video Graphics Array), 分辨率为 480*640. QVGA (Quarter VGA), 分辨率为240*320. HVGA (Hal ...

  9. nodeType的意思

    nodeType是用来获得当前节点对象的类型.nodeType 属性可返回节点的类型.元素element   1   属性attr   2   文本text   3   注释comments   8 ...

  10. boost::spirit unicode 简用记录

    本文简单记录使用boost::spirit解析有中文关键字的字符串并执行响应动作,类似于语法分析+执行. 关键字:字符串解析 boost::spirit::qi::parse qi::unicode: ...