思路：利用动画帧来不断修改属性,三个动画帧分别实现光标闪烁,光标移动,背景图片切换功能.(需要几张背景图片)
代码如下：
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>