                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS+CSS3實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果

為什么我在圖片上面加了動(dòng)畫效果之后就沒(méi)有倒影了呢？

<!DOCTYPE html>
<html>
<head>
??? <title> JS+CSS3實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果</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;
??????? }
??????? /*幻燈片區(qū)域*/
??????? .slider .main{
??????????? overflow: hidden;
??????? }
??????? /*每一個(gè)幻燈片的樣式*/
??????? .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';
??????? }
??????? /*控制按鈕區(qū)域*/
??????? .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>