<!doctype html>
<html lang="en">
<head>
<!-雪花红梅 电视剧步步惊心插曲-刘诗诗-->
<meta charset="UTF-8"> <!--声明编码 UTF-8(国际编码)-->
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
#header{width:100%;
height:315px;
background:url("images/snow-bg.png")repeat-y center,url("images/header-bg.png");
-webkit-animation:auto 20s linear infinite;
}
#header:hover{-webkit-animation-play-state:paused;}/*规定动画暂停还是播放*/
@-webkit-keyframes auto{
0%{background-position:center 0, 0 0}
100%{background-position:center 885px,0 0}
}
@-webkit-keyframes play{
0%{-webkit-transform:translate(0,-315px);}
100%{-webkit-transform:translate(0,0);}
}
#header .con .tree,#header .con .ice{
-webkit-animation:play 1s ;
}
#header .con{width:960px;height:315px;
background-image:url("images/con-bg.png");
background-repeat:no-repeat;
background-position:0 204px;
margin:auto;
position:relative;
}
#header .con .tree{width:112px;
height:137px;
position:absolute;
background:url("images/tree.png");
}
#header .con .ice{width:115px;height:103px;
background:url("images/ice.png");
position:absolute;
left:410px;
top:210px;
}
#header .con .tree1{left:35px;
top:169px;
-webkit-animation-duration:.6s; /*完成动画所需要的时间*/
}
#header .con .tree2{left:200px;
top:180px;
-webkit-animation-duration:.2s; /*完成动画所需要的时间*/
}
#header .con .tree3{left:350px;
top:125px;
-webkit-animation-duration:.3s; /*完成动画所需要的时间*/
}
#header .con .tree4{left:515px;
top:150px;
-webkit-animation-duration:.4s; /*完成动画所需要的时间*/
}
#header .con .tree5{left:680px;
top:170px;
-webkit-animation-duration:.6s; /*完成动画所需要的时间*/
}
#header .con .tree6{left:805px;
top:125px;
-webkit-animation-duration:.8s; /*完成动画所需要的时间*/
}
</style>
</head>
<body>
<div id="header">
<div class="con">
<div class="tree tree1"></div>
<div class="tree tree2"></div>
<div class="tree tree3"></div>
<div class="ice"></div>
<div class="tree tree4"></div>
<div class="tree tree5"></div>
<div class="tree tree6"></div>
</div>
</div>
<embed height="50" width="100" src="龚淑均 - 雪花红梅.mp3">
<p>如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。</p>
<p>或者你没有打开扬声器。</p>
</body>
</html>