Codrops CSS3 Lightbox 3

作者：大漠 日期：2012-10-25 点击：704
Lightbox
:target
gradient
Codrops CSS3 Lightbox 3

Codrops CSS3 Lightbox总供有三个效果，今天把最后一个效果放上来与大家分享，这是一个完美的Lightbox效果，是有Codrops的Mary Lou制作的，能把CSS3运用到如此完美，真是让人折服。最后一个案例与前两个Lightbox的效果上没有多大的区别，这一部如何制作，如果你观注了本站的相关案例，我想您是懂了，而这个效果与前两个不同之处是添加了向前向后播放的按钮效果。

demodownload

HTML CODE

<ul class="lb-album clearfix">
  <li>
    <a href="#image-1">
      <img src="images/thumbs/1.jpg" alt="image01">
      <span>Pointe</span>
    </a>
    <div class="lb-overlay" id="image-1">
      <img src="images/full/1.jpg" alt="image01" />
      <div>
        <h3>pointe <span>/point/</span></h3>
        <p>Dance performed on the tips of the toes</p>
        <a href="#image-10" class="lb-prev">Prev</a>
        <a href="#image-2" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-2">
      <img src="images/thumbs/2.jpg" alt="image02">
      <span>Port de bras</span>
    </a>
    <div class="lb-overlay" id="image-2">
      <img src="images/full/2.jpg" alt="image02" />
      <div>							
        <h3>port de bras <span>/ˌpôr də ˈbrä/</span></h3>
        <p>An exercise designed to develop graceful movement and disposition of the arms</p>
        <a href="#image-1" class="lb-prev">Prev</a>
        <a href="#image-3" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-3">
      <img src="images/thumbs/3.jpg" alt="image03">
      <span>Plié</span>
    </a>
    <div class="lb-overlay" id="image-3">
      <img src="images/full/3.jpg" alt="image03" />
      <div>							
        <h3>pli·é <span>/plēˈā/</span></h3>
        <p>A movement in which a dancer bends the knees and straightens them again</p>
        <a href="#image-2" class="lb-prev">Prev</a>
        <a href="#image-4" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-4">
      <img src="images/thumbs/4.jpg" alt="image04">
      <span>Adagio</span>
    </a>
    <div class="lb-overlay" id="image-4">
      <img src="images/full/4.jpg" alt="image04" />
      <div>							
        <h3>a·da·gio <span>/əˈdäjō/</span></h3>
			  <p>A movement or composition marked to be played adagio</p>
        <a href="#image-3" class="lb-prev">Prev</a>
        <a href="#image-5" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-5">
      <img src="images/thumbs/5.jpg" alt="image05">
      <span>Frappé</span>
    </a>
    <div class="lb-overlay" id="image-5">
      <img src="images/full/5.jpg" alt="image05" />
      <div>							
        <h3>frap·pé<span>/fraˈpā/</span></h3>
        <p>Involving a beating action of the toe of one foot against the ankle of the supporting leg</p>
        <a href="#image-4" class="lb-prev">Prev</a>
        <a href="#image-6" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-6">
      <img src="images/thumbs/6.jpg" alt="image06">
      <span>Glissade</span>
    </a>
    <div class="lb-overlay" id="image-6">
      <img src="images/full/6.jpg" alt="image06" />
      <div>							
        <h3>glis·sade <span>/gliˈsäd/</span></h3>
        <p>One leg is brushed outward from the body, which then takes the weight while the second leg is brushed in to meet it</p>
        <a href="#image-5" class="lb-prev">Prev</a>
        <a href="#image-7" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-7">
      <img src="images/thumbs/7.jpg" alt="image07">
      <span>Jeté</span>
    </a>
    <div class="lb-overlay" id="image-7">
      <img src="images/full/7.jpg" alt="image07" />
      <div>							
        <h3>je·té <span>/zhə-ˈtā/</span></h3>
        <p>A springing jump made from one foot to the other in any direction</p>
        <a href="#image-6" class="lb-prev">Prev</a>
        <a href="#image-8" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-8">
      <img src="images/thumbs/8.jpg" alt="image08">
      <span>Piqué</span>
    </a>
    <div class="lb-overlay" id="image-8">
      <img src="images/full/8.jpg" alt="image08" />
      <div>							
        <h3>pi·qué <span>/pēˈkā/</span></h3>
        <p>Strongly pointed toe of the lifted and extended leg sharply lowers to hit the floor then immediately rebounds upward</p>
        <a href="#image-7" class="lb-prev">Prev</a>
        <a href="#image-9" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-9">
      <img src="images/thumbs/9.jpg" alt="image09">
      <span>Arabesque</span>
    </a>
    <div class="lb-overlay" id="image-9">
      <img src="images/full/9.jpg" alt="image09" />
      <div>							
        <h3>ar·a·besque <span>/ˌarəˈbesk/</span></h3>
        <p>Position of the body supported on one leg, with the other leg extended behind the body with the knee straight</p>
        <a href="#image-8" class="lb-prev">Prev</a>
        <a href="#image-10" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-10">
      <img src="images/thumbs/10.jpg" alt="image10">
      <span>Ballerina</span>
    </a>
    <div class="lb-overlay" id="image-10">
      <img src="images/full/10.jpg" alt="image10" />
      <div>							
        <h3>bal·le·ri·na <span>/ˌbaləˈrēnə/</span></h3>
        <p>A female ballet dancer</p>
        <a href="#image-9" class="lb-prev">Prev</a>
        <a href="#image-1" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
</ul>

CSS CODE

body {
  font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
  background: #FBF8F4 url(images/bg.jpg) repeat top left;
  font-weight: 400;
  font-size: 15px;
  color: #AA3E03;
  overflow-y: scroll;
}
@font-face {
  font-family: 'BebasNeueRegular';
  src: url('fonts/BebasNeue-webfont.eot');
  src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/BebasNeue-webfont.woff') format('woff'),
       url('fonts/BebasNeue-webfont.ttf') format('truetype'),
       url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.lb-album{
  width: 900px;
  margin: 0 auto;
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
  float: left;
  margin: 5px;
  position: relative;
}
.lb-album li > a,
.lb-album li > a img{
  display: block;
}
.lb-album li > a{
  width: 150px;
  height: 150px;
  position: relative;
  padding: 10px;
  background: #f1d2c2;
  box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
  border-radius:4px;
}
.lb-album li > a span{
  position: absolute;
  width: 150px;
  height: 150px;
  top: 10px;
  left: 10px;
  text-align: center;
  line-height: 150px;
  color: rgba(27,54,81,0.8);
  text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
  font-size: 24px;
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  background: rgb(241,210,194);
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -ms-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
  opacity: 1;
  filter: alpha(opacity=99); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
  width: 0px;
  height: 0px;
  position: fixed;
  overflow: hidden;
  left: 0px;
  top: 0px;
  padding: 0px;
  z-index: 99;
  text-align: center;
  background: rgb(241,210,194);
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{
  position: relative;
  color: rgba(27,54,81,0.8);
  width: 550px;
  height: 80px;
  margin: 40px auto 0px auto;
  text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}
.lb-overlay div h3,
.lb-overlay div p{
  padding: 0px 20px;
  width: 200px;
  height: 60px;
}
.lb-overlay div h3{
  font-size: 36px;
  float: left;
  text-align: right;
  border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
  font-size: 16px;
  font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
  font-style: italic;
}
.lb-overlay div h3 span{
  display: block;
  line-height: 30px;
}
.lb-overlay div p{
  font-size: 14px;
  text-align: left;
  float: left;
  width: 260px;
}
.lb-overlay a.lb-close{
  background: rgba(27,54,81,0.8);
  z-index: 1001;
  color: #fff;
  position: absolute;
  top: 43px;
  left: 50%;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
  width: 50px;
  height: 23px;
  overflow: hidden;
  margin-left: -25px;
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}
.lb-overlay img{
  /* height: 100%; For Opera max-height does not seem to work */
  max-height: 100%;
  position: relative;
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
  -webkit-transition: opacity 0.5s linear;
  -moz-transition: opacity 0.5s linear;
  -o-transition: opacity 0.5s linear;
  -ms-transition: opacity 0.5s linear;
  transition: opacity 0.5s linear;
}
.lb-prev, .lb-next{
  text-indent: -9000px;
  position: absolute;
  top: -32px;
  width: 24px;
  height: 25px;
  left: 50%;
  opacity: 0.8;
  filter: alpha(opacity=80); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /*IE8*/
}
.lb-prev:hover, .lb-next:hover{
  opacity: 1;
  filter: alpha(opacity=99); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-prev{
  margin-left: -30px;
  background: transparent url(images/arrows.png) no-repeat top left;
}
.lb-next{
  margin-left: 6px;
  background: transparent url(images/arrows.png) no-repeat top right;
}
.lb-overlay:target {
  width: auto;
  height: auto;
  bottom: 0px;
  right: 0px;
  padding: 80px 100px 120px 100px;
}
.lb-overlay:target img,
.lb-overlay:target a.lb-close{
  opacity: 1;
  filter: alpha(opacity=99); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
/* 
  100% Height for Opera as the max-height seems to be ignored, not optimal for large screens 
  http://bricss.net/post/11230266445/css-hack-to-target-opera 
*/
x:-o-prefocus, .lb-overlay img {
  height: 100%;
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/codrops-css3-lightbox3.html

英文网址：CSS3 LIGHTBOX

返回顶部