模仿光标闪烁,光标移动,自动切换背景

思路：利用动画帧来不断修改属性,三个动画帧分别实现光标闪烁,光标移动,背景图片切换功能.(需要几张背景图片)
代码如下：
 1 <html>
 2 　　<head>
 3 　　　　<title> 欢迎 </title>
 4 　　　　<style type="text/css">
 5 　　　　　　body{
 6 　　　　　　　　/*设置整体背景颜色为绿色*/
 7 　　　　　　　　background-color:green; 
 8 
 9 　　　　　　　　/*设置动画背景颜色 */
10 　　　　　　　　animation: bgcol 15s infinite; 
11 　　　　　　　　/*背景图片不重复 no-repeat不重复 repeat -x横向重复 repeat -y纵向重复*/
12 　　　　　　　　background-repeat:no-repeat;
13 　　　　　　　　/*设置图片格式*/
14 　　　　　　　　background-attachment:fixed; 
15 　　　　　　　　/*设置图片位置 center left right bottom*/
16 　　　　　　　　background-position:center;
17 　　　　　　　　}　　　　　　　　
18 　　　　　　p{
19 　　　　　　　　/*属性 名称color 属性值 blue*/
20 　　　　　　　　/*设置p标签中的字体为蓝色*/ 
21 　　　　　　　　color:blue;    
22 　　　　　　　　/*设置字体为30像素    px像素单位*/
23 　　　　　　　　font-size:30px;    
24 　　　　　　　　/*设置右边框:长度为10个像素,实线,白色*/
25 　　　　　　　　border-right:3px solid white;    
26 　　　　　　　　/*设置宽度为9个中文字符的宽度*/
27 　　　　　　　　width:9em;    
28 　　　　　　　　/*设置动画,让动画和动画帧关联起来,infinite是不停执行 */
29 　　　　　　　　animation: 
30 　　　　　　　　　　gogo 0.5s infinite,
31 　　　　　　　　　　textWidth 5s steps(9);
32 
33 　　　　　　　　/*内容溢出 隐藏*/
34 　　　　　　　　overflow: hidden;
35 　　　　　　　　/*不允许换行*/
36 　　　　　　　　white-space: nowrap;
37 　　　　　　　}
38 　　　　　　　　/*设置一个动画帧 名称为gogo 模仿光标闪烁*/
39 　　　　　　　　@keyframes gogo{
40 　　　　　　　　0%{
41 　　　　　　　　/*transparent 透明*/
42 　　　　　　　　border-color:transparent;
43 　　　　　　　　 }
44 　　　　　　　　}
45 　　　　　　　　/*%0-%100代表的是整个帧从始到终的过程 模仿光标移动*/
46 　　　　　　　　@keyframes textWidth{
47 　　　　　　　　0%{
48 　　　　　　　　　　width:0px;
49 　　　　　　　　}
50 　　　　　　　　100%{
51 　　　　　　　　　　width:9em;
52 　　　　　　　　}
53 　　　　　　}
54 　　　　　　　　/*切换背景颜色 切换背景图片 background:url(存放相对路径))*/
55 　　　　　　　　@keyframes bgcol{
56 　　　　　　　　0%{
57 　　　　　　　　　　/*background-color:rgb(10,10,10);*/
58 　　　　　　　　　　background-image:url(images/001.jpg);
59 　　　　　　　　}
60 　　　　　　　　20%{
61 　　　　　　　　　　/*background-color:rgb(100,100,100);*/
62 　　　　　　　　　　background-image: url(images/002.jpg);
63 　　　　　　　　}
64 　　　　　　　　40%{
65 　　　　　　　　　　/*background-color:rgb(150,150,150);*/
66 　　　　　　　　　　background-image:url(images/003.jpg);
67 　　　　　　　　}
68 　　　　　　　　60%{
69 　　　　　　　　　　/*background-color: rgb(200,200,200);*/
70 　　　　　　　　　　background-image:url(images/004.jpg);
71 　　　　　　　　}
72 　　　　　　　　80%{
73 　　　　　　　　　　/*background-color:rgb(250,250,250);*/
74 　　　　　　　　　　background-image:url(images/005.jpg);
75 　　　　　　　　}
76 　　　　　　　　100%{
77 　　　　　　　　　　background-image:url(images/006.jpg);
78 　　　　　　　　}
79 　　　　　　　　}
80 　　　　</style>
81 　　</head>
82 
83 　　<body>
84 　　　　<p>欢迎欢迎热烈欢迎！</p>
85 　　</body>
86 </html>