html
1 <!doctype html> 2 <html> 3 <head> 4 ????<meta charset="utf-8"> 5 ????<meta name="keywors" content="关键字"> 6 ????<title>动态管理</title> 7 ????<link type="text/css" href="a.css" rel="stylesheet"> 8 ????<style type="text/css"> 9 ????????*{margin:0}10 /*start body*/11 ?????????12 ????????body{width:100%;color:#FFFFFF;background-image:url("1.jpeg");/*设置背景平铺*/background-repeat: repeat;/*背景居中*/background-position:center;/*防止背景随文本滚动条滚动至图片底部而背景消失*/background-attachment:fixed;/*当元素内容溢出时选择是否使用滚动条 默认 visible*/overflow:auto}13 14 /*end body*/15 /*start text*/16 17 ????????.text{width:700px;height:400px;margin:0 auto;}18 ????????.text p{line-height:200%;font-size:200%;/*首行缩进*/text-indent:2em;/*字体 宋体楷体等*/font-family:Serif;/*字体样式 斜体等*/font-style:oblique;/*字符间距*/letter-spacing:20px;font-weight:1800;/*文本大写字母开头*/text-transform:capitalize;}19 ????????.text h1{font-size:5vh/*vh 表示视图高度 百分比高*/;/*文本对齐方式*/text-align:center; line-height:200%;font-family:Fantasy;}20 ????????21 ????????/*文本修饰*/22 ????????.text h2{text-decoration:overline}23 ????????.text h3{text-decoration:line-through} ???24 ????????.text h4{text-decoration:underline}25 ????????.text h5{text-decoration:blink}26 /*end text*/ ???????27 /* start img*/28 29 ????????.imgList{width:100%;height:100%;top:0;left:0;}30 ????????.img1,.img2,.img3,.imgList{position:absolute;}/*绝对定位*/31 ????????.img1{left:10%;top:10%;}32 /* ???????.img2{bottom:10%;right:10%;animation: myframe 10s esse-in-out 0s infinite alternate; }*/33 /* ???????.img2{bottom:10%;right:10%;} ??*/34 ????????.img3{top:10%;right:10%;transform:rotate(50deg);/*图片剪切*/clip:circle(100) }35 36 /*end img*/37 /*start list*/38 39 ????????.list{width:100%; height:400px;font-size:200%;/*边框样式*/border:solid;/*边框颜色*/border-color:red;/*边框宽度 ?上右下左*/border-width: 5px 20px 10px 1px;}40 ????????.l1{list-style-type:none;}41 ????????.l2{list-style-type:circle;}42 ????????.l3{list-style-type:square;}43 /*end list*/44 ????</style>45 </head>46 <body>47 <!-- start text-->48 49 ????<div class="text" >50 ????????<h1>动态网页测试</h1>51 ????????<h2>测试标题2</h2>52 ????????<h3>测试标题3</h3>53 ????????<h4>测试标题4</h4>54 ????????<h5>测试标题5</h5>55 <!--start list-->56 ????????<div class="list">57 ????????????<ul class="l1">58 ????????????????<li>茶</li>59 ????????????????<li>咖啡</li>60 ????????????</ul>61 ????????????<ul class="l2">62 ????????????????<li>茶</li>63 ????????????????<li>咖啡</li>64 ????????????</ul>65 ????????????<ul class="l3">66 ????????????????<li>茶</li>67 ????????????????<li>咖啡</li>68 ????????????</ul>69 ????????</div>70 <!--end list-->71 ????????<p id="test"></p>72 ????</div>73 74 75 <!-- end text-->76 <!--star image-->77 78 ????<div class="imgList">79 ????????<img src="1.jpeg" width="250" height="200" alt="" class="img1 bounce">80 ????????<img src="2.jpeg" width="250" height="200" alt="" class="img2 run">81 ????????<img src="3.jpg" width="250" height="200" alt="" class="img3 my">82 ????</div>83 <!--end image-->84 ????<script>85 ????????var i=0;86 ????????var str="this is 动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试";87 ????????window.onload = function typing(){88 ????????var myDiv = document.getElementById("test");89 ????????myDiv.innerHTML+=str.charAt(i)90 ????????i++;91 ????????console.log("AAA");92 ????????if(i<=str.length){93 ????????????var id =setTimeout(typing,100);94 ????????}95 ????????}96 ????</script>97 98 </body>99 </html>css
1 .bounce{animation:bounce 3s ease-out infinite;} 2 @keyframes bounce { 3 ??0% { 4 ????transform:translateY(-100%); 5 ????opacity: 0; 6 ??} 7 ??5% { 8 ??????transform:translateY(-100%); 9 ????opacity: 0;10 ??}11 ??15% {12 ??????transform:translateY(0);13 ????padding-bottom: 5px;14 ??}15 ??30% {16 ??????transform:translateY(-50%);17 ??}18 ??40% {19 ??????transform:translateY(0%);20 ????padding-bottom: 6px;21 ??}22 ??50% {23 ??????transform:translateY(-30%);24 ??}25 ??70% {26 ??????transform:translateY(0%);27 ????padding-bottom: 7px;28 ??}29 ??80% {30 ??????transform:translateY(-15%);31 ??}32 ??90% {33 ??????transform:translateY(0%);34 ??????padding-bottom: 8px;35 ??}36 ??95% {37 ??????transform:translateY(-7%);38 ??}39 ??97% {40 ??????transform:translateY(0%);41 ??????padding-bottom: 9px;42 ??}43 ??99% {44 ??????transform:translateY(-3%);45 ??}46 ??100% {47 ??????transform:translateY(0);48 ??????padding-bottom: 9px;49 ????opacity: 1;50 ??}51 }52 .my{animation:my 3s ease-out infinite;}53 @keyframes my {54 ?0%{transform:translate3d(0,0,0);}55 ?33%{transform:translate3d(-10px,20px,0);}56 ?66%{transform:translate3d(5px,-20px,0);}57 ?100%{transform:translate3d(0,0,0);} 58 }59 .run{animation:run 5s ease-in-out 0s infinite;}60 @keyframes run {61 0%{bottom: 20px;left:200px;opacity:0;}62 50%{bottom: 50px;left:300px;opacity:0.5;}63 75%{bottom: 100px;left:400px;opacity:1;}64 100%{bottom: 200px;left:500px;}65 }cssTest
原文地址：http://www.cnblogs.com/the-wang/p/7773136.html