Codrops CSS3 Lightbox

#Lightbox #transition #animation #@font-face

发布于大漠

13 年前

Codrops CSS3 Lightbox总供有三个效果，今天把第一个效果放上来与大家分享，这是一个完美的Lightbox效果，是有Codrops的Mary Lou制作的，真的很完美，不得不让人折服。能把CSS3运用到如此完美。在这个效果中把CSS3常用的属性几乎都用上了，比如说：@font-face制作特殊字体效果；border-radius制作圆角效果；box-shadow实出盒子阴影效果；text-shadow实现文字阴影效果；opacity制作透明效果；gradient制作的渐变背景图片；transition实现过渡的动画效果；animation制作的动画效果等等。而且最为精彩的部分，图片能随浏览器大小进对绽放，要是你对这个感兴趣，不仿看看。

demo download

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">c
      <a href="#page" class="lb-close">x Close</a>
      <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>
      </div>							
    </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>
      </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>
      </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>
      </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>
      </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>
      </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>
      >/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>
      </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>
      </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>
      </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);
  padding-top:20px;
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  width: 550px;
  margin: 10px auto 0px auto;
  text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
  -webkit-transition: opacity 0.3s linear 1.3s;
  -moz-transition: opacity 0.3s linear 1.3s;
  -o-transition: opacity 0.3s linear 1.3s;
  -ms-transition: opacity 0.3s linear 1.3s;
  transition: opacity 0.3s linear 1.3s;
}
.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: 20px;
}
.lb-overlay div p{
  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;
  text-decoration: none;
  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);
  -webkit-transition: opacity 0.3s linear 1.2s;
  -moz-transition: opacity 0.3s linear 1.2s;
  -o-transition: opacity 0.3s linear 1.2s;
  -ms-transition: opacity 0.3s linear 1.2s;
  transition: opacity 0.3s linear 1.2s;
}
.lb-overlay img{
  /* height: 100%; For Opera max-height does not seem to work */
  max-height: 100%;
  position: relative;
  box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
}
.lb-overlay:target {
  width: auto;
  height: auto;
  bottom: 0px;
  right: 0px;
  padding: 80px 100px 120px 100px;
}
.lb-overlay:target img {
  -webkit-animation: fadeInScale 1.2s ease-in-out;
  -moz-animation: fadeInScale 1.2s ease-in-out;
  -o-animation: fadeInScale 1.2s ease-in-out;
  -ms-animation: fadeInScale 1.2s ease-in-out;
  animation: fadeInScale 1.2s ease-in-out;
}
.lb-overlay:target a.lb-close,
.lb-overlay:target > div{
  opacity: 1;
  filter: alpha(opacity=99); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
@-webkit-keyframes fadeInScale {
  0% { -webkit-transform: scale(0.6); opacity: 0; }
  100% { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes fadeInScale {
  0% { -moz-transform: scale(0.6); opacity: 0; }
  100% { -moz-transform: scale(1); opacity: 1; }
}
@-o-keyframes fadeInScale {
  0% { -o-transform: scale(0.6); opacity: 0; }
  100% { -o-transform: scale(1); opacity: 1; }
}
@-ms-keyframes fadeInScale {
  0% { -ms-transform: scale(0.6); opacity: 0; }
  100% { -ms-transform: scale(1); opacity: 1; }
}
@keyframes fadeInScale {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 
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%;
}

特别声明：此案例代码和图片来自于http://tympanus.net/codrops/2011/12/26/css3-lightbox/

demo download

如需转载，烦请注明出处：https://www.fedev.cn/demo/codrops-css3-lightbox.html

英文网址：CSS3 LIGHTBOX

Nike Bonafide