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

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

Full CSS3 Lightbox从标题上就知道是一个CSS3制作的一个全屏显示的Lightbox效果。这个效果是在前一个效果的基础做了一定的改良，修改的最显示的地方就是添加了一个假的关闭按钮，其实给Lightbox的全屏图片显示时添加了一个动画效果，有０.９放大到１，而图片居中效果依然使用的是table和table-cell属性。详细的请参考下面展示的案例代码。

这个Lightbox效果也是一个纯CSS3写的效果，这个效果的制作方法也不算复杂，相对来说比较简单。主要使用了CSS3的“:target”属性来控制对应大图的显示与隐藏，而且配用了transition属性来制作了动画效果，而且还有意思的是使用了table和table-cell来实现图片的居中效果。具体效果请看看详细代码。

这个Lightbox效果实现原理很简单，就是点击图片或者使用tab键，当图片得到焦点（:focus）时，图片会在当前位置被放大，同时移动Y轴的距离。整个制作过程中使用了HTML5的新标签figure和figcaption，包含图片以及图片标题，同时在figure相邻位置设置一个span标签，通过选择器来控制span标签制作一个overlayout的朦板效果。这个效果中仅用到CSS3属性也非常的简单，利用border-radius制作了图片边框的圆角效果，使用box-shadow制作了图片的阴影效果，最主要的是使用CSS3的选择器配合transition和transform属性制作了一个类似于Lightbox的效果。