CSS3 Imageslider和按钮过渡效果

我正在尝试为mye图像滑块创建图像和按钮滑块过渡效果。我想使它类似于这个页面http://bit.ly/IJxtK6，但我不知道我怎么能做到这一点。CSS3 Imageslider和按钮过渡效果

这里是我的代码：

HTML：

<div class="slider"> 
     <ul class="frames"> 
      <li id="one" class="slide"> 
       <a href="#"><img src="images/slideshow1.jpg" alt="Slide 1"></a> 
       <nav> 
        <a class="prev" href="#three">&lang;</a> 
        <a class="next" href="#two">&rang;</a> 
       </nav>    
      </li> 
      <li id="two" class="slide"> 
       <a href="#"><img src="images/slideshow2.jpg" alt="Slide 2"></a> 
       <nav> 
        <a class="prev" href="#one">&lang;</a> 
        <a class="next" href="#three">&rang;</a> 
       </nav>    
      </li> 
      <li id="three" class="slide"> 
       <a href="#"><img src="images/slideshow3.jpg" alt="Slide 3"></a> 
       <nav> 
        <a class="prev" href="#two">&lang;</a> 
        <a class="next" href="#one">&rang;</a> 
       </nav>    

      <li class="quicknav"> 
       <ul> 
        <li><a href="#one"></a></li> 
        <li><a href="#two"></a></li> 
        <li><a href="#three"></a></li> 
       </ul> 
      </li> 
     </ul> 
    </div>

CSS：

/* ------------------ SLIDESHOW ------------------ */ 

    /* Slider */ 
    .slider { 
     height: 450px; 
     left: 481px; 
     margin: -125px -225px; 
     position: absolute; 
     top: 273px; 
     width: 1024px; 
     z-index: 0; 

    } 
    .slider .frames { 
     height: 450px; 
     position: relative; 

    } 
    .slider .frames .slide { 
     height: 450px; 
     list-style: none; 
     position: absolute; 
     width: 1024px; 
    } 

    .slider .slide:target { z-index: 100 } 

    .slider .frames .slide img { 
     height: 450px; 
     width: 1024px; 
    } 
    .slider .frames .slide nav a { 
     background: #fff; 
     font-size: 16px; 
     line-height: 50px; 
     margin-top: -25px; 
     opacity: 0; 
     position: absolute; 
     text-align: center; 
     text-decoration: none; 
     top: 45%; 
     width: 50px; 
     visibility: hidden; 
     z-index: 10; 
     color: #888; 
     font-weight: bold; 
     font-size: 20px; 

    } 
    .slider:hover .frames .slide nav a { 
     opacity: 1; 
     visibility: visible; 
    } 
    .slider .frames .slide nav .prev { 
     /*border-radius*/ 
     padding: 5px; 
     left: 0; 
    } 
    .slider .frames .slide nav .next { 
     /*border-radius*/ 
     padding: 5px; 
     right: 0; 
    } 
    .slider .frames .slide nav a:hover { background: #d13030; color: #fff; } 

    .slider .quicknav { 
     bottom: 0; 
     left: 950px; 
     font-size: 0; 
     position: absolute; 
     z-index: 100; 
    } 
    .slider:hover .quicknav { color: #d13030; } 

    .slider .quicknav li { display: inline-block } 


    .slider .quicknav a { 
     background: #fff; 
     /*border-radius*/ 
     display: block; 
     height: 10px; 
     margin: 10px 5px; 
     text-decoration: none; 
     width: 10px; 

    } 
    .slider .quicknav a:hover { background: #d13030 }

感谢。

来源

2014-03-05 Nohman