为什么我在图片上面加了动画效果之后就没有倒影了呢？
<!DOCTYPE html>
<html>
<head>
<title> JS+CSS3实现带预览图幻灯片效果</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding: 50px 0;
background: #fff;
font-size: 14px;
font-family:'Avenir Next';
-webkit-font-smoothing:antialiased;/*字体抗锯齿*/
color:#555;
}
.slider,.slider .main, .slider .main .main-i{
width: 100%;
height: 400px;
position: relative;
}
/*幻灯片区域*/
.slider .main{
overflow: hidden;
}
/*每一个幻灯片的样式*/
.slider .main .main-i{ }
.slider .main .main-i img{
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.slider .main .main-i .caption{
position: absolute;
top: 30%;
right: 50%;
z-index: 9;
}
.slider .main .main-i .caption h2{
font-size: 40px;
line-height: 50px;
color: #b5b5b5;
text-align: right;
}
.slider .main .main-i .caption h3{
font-size: 70px;
line-height: 70px;
color: #000;
text-align: right;
font-family: 'Open Sans Condensed';
}
/*控制按钮区域*/
.slider .ctrl{
width: 100%;
height: 13px;
line-height: 13px;
text-align: center;
position: absolute;
bottom: -13px;
left: 0;
background: #f00;
}
.slider .ctrl .ctrl-i{
display: inline-block;
width: 150px;
height:13px;
background: #666;
box-shadow: 0 1px 1px rgba(0,0,0,.3);
position: relative;
}
.slider .ctrl .ctrl-i img{
width: 100%;
position: absolute;
left: 0;
bottom: 50px;
z-index: 1;
opacity: 0;
-webkit-transition:all .2s;
-moz-transition:all .2s;
transition:all .2s;
}
/*hover 到控制按钮的样式*/
.slider .ctrl .ctrl-i:hover{
background: #F0F0F0;
}
.slider .ctrl .ctrl-i:hover img{
position: absolute;
bottom: 13px;
left: 0;
-webkit-box-reflect:below 0px -webkit-gradient(
linear,
left top,
left bottom,
from( transparent ),
color-stop( 50%,transparent ),
to( rgba( 225,255,255,.3 ))
);
opacity: 1;
}
</style>
</head>
<body>
<div class="slider">
<div class="main">
<div class="main-i">
<div class="caption">
<h2>h2 caption</h2>
<h3>h3 caption</h3>
</div>
<img src="images/1.jpg">
</div>
</div>
<div class="ctrl">
<a class="ctrl-i" href="javascript:;"><img src="images/1.jpg"></a><a class="ctrl-i" href="javascript:;"> <img src="images/1.jpg"></a>
</div>
</div>
</body>
</html>
