<html>
<head>
<style type="text/css">
body
{ 

  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}




/***淡入淡出-start***/


@-webkit-keyframes fadeIn {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
50% {
opacity: 0; /*中间状态 透明度为0*/
}
100% {
opacity: 1; /*结尾状态 透明度为1*/
}
}


.box
{-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 3s; /*动画持续时间*/
-webkit-animation-iteration-count: 1; /*动画次数*/
-webkit-animation-delay: 0s; /*延迟时间*/}


/***淡入淡出-end***/ 



</style>
</head>

<body>
<body>


<div style="width:100px;height:100px;background:red;position:absolute;top:100px;left:100px" class="box">
</div>

<div style="width:100px;height:100px;background:blue;position:absolute;top:300px;left:300px">
</div>


<div style="width:100px;height:100px;background:white;position:absolute;top:600px;left:600px">
</div>

<div style="width:100px;height:100px;background:gray;position:absolute;top:900px;left:900px">
</div>

<div style="width:100px;height:100px;background:black;position:absolute;top:1200px;left:1200px">
</div>

</body>
</body>
</html>