Lightbox

Codrops CSS3 Lightbox 3

Codrops CSS3 Lightbox 3

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

Codrops CSS3 Lightbox 2

Codrops CSS3 Lightbox 2

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

Codrops CSS3 Lightbox

Codrops CSS3 Lightbox

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

Full CSS3 Lightbox

Full CSS3 Lightbox

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

Pure CSS3 Lightbox

Pure CSS3 Lightbox

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

Lightbox effect with Tabindex and CSS3

Lightbox effect with Tabindex and CSS3

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

CSS3 Gallery Lightbox

CSS3 Gallery Lightbox

这个Gallery Lightbox同样没有使用js脚本代码仅使用了CSS代码实现,这个效果初看有些许复杂,一开始不太清楚其实现原理,但仔细看看代码,还是能整明白的。功能主要依赖于css的选择器,以及配合锚点定位来实现。其中很关键一步是HTML的结构,特别是图片的点击播放效果,顺序不能搞错,不然效果无法实现。不过这个效果有一个致命的缺点,那就是对图片的大小有所限制,无法实现图片的自应大小,如果你够有信心的话,可以尝试一下不限制宽度,能否实现这个效果。另外一点,CSS实现的效果,当然没有js实现的效果那么流畅,不过当作挑战性的学习,还是不错的,你不仿一试。

CSS3制作Lightbox效果

CSS3制作Lightbox效果

Lightbox效果以往都是依靠jQuery插件或者别的JavaScript脚本来实现,今天开始为大家提供几个纯CSS3制作的Lightbox效果。今天这个Lightbox效果使用的是input[type=radio]配合CSS3的相邻兄弟元素选择器(E + F)来实现,这种制作方法最关键的地方是结构的配合,以及label的for属性与元素的id属性配合一致,并且运用了display:table属性实现弹出层的图片居中效果。详细的请看下面的代码。

返回顶部