10个CSS3灯箱切换特效

灯箱效果一般使用javascript来实现,用来展示图片、视频、文字等特效,今天本文向大家推荐10个用CSS3实现的灯箱特效。

1. Drop-In Modals

For those using WebKit based browsers (Safari and Chrome), CSS3 effects and properties can help you create fast, simple modals by using transforms, animation, and some subtle design cues.
Demo works best in Safari 4 or Chrome 5.

2. CSS3 – Clickbox – Gallery

Uses CSS3 adjacent sibling selector to produce a Clickbox Gallery. A series of images can be viewed using ‘Previous’ and ‘Next’ buttons that popup when hovering the images.
Demo works best in For Firefox, Opera, Safari, Chrome, IE8, SeaMonkey and Floc

CSS3 Clickbox Gallery

3. Futurebox, lightbox without the javascript and target pseudo-class

Futurebox version 3 introduces a new technique on showing and hiding modals using the checked pseudo-class rather than target. It also demonstrates loading content within a futurebox modal.

Futurebox, lightbox without the javascript and target pseudo-class

4. Lightbox effect with Tabindex and CSS3

A tutorial written in french! Only CSS3 and HTML5 languages are used right here. Lightbox effect best works for Webkit. Tab key on the keyboard can be used to jump to next image.

Lightbox effect with Tabindex and CSS3

5. Pure CSS3 Lightbox

Pure CSS3, no javascript. Webkit browsers get a little bonus animation. The :target pseudo selector is truly a powerful new feature in CSS3.
Targeting a link directly to the URL with the hash tag will trigger the “LighterBox” onload.

Pure CSS3 Lightbox

6. Full CSS3 Lightbox

Full CSS3 lightbox with no Javascript – a CSS3 experiment by Benjamin De Cock

Full CSS3 lightbox - no javascript

7. 100% CSS3 Lightbox

The core functionality, the part of the lightbox that is so revolutionary, is the ability of CSS to recognize a click event. To do so is a hack, but uses valid css3 and html5.

Fully supported by firefox 4.0+, safari 4.0+ and chrome (any version)

100% CSS3 Lightbox

8. Pure CSS image gallery (webkit mostly)

This gallery is fully functional in webkit (tested & developed under Chrome). Main functionality is also preserved in Firefox, but -moz-transition doesn’t work well if animated elements aren’t the ones that get :focused or :hovered.

CSS3 Overlay System

9. A CSS3 Overlay System

A CSS3 Overlay system for modal dialogs.

CSS3 Overlay System

10. Semantic CSS3 Lightboxes

This tutorial aims to showcase a method of displaying content based on the lightbox, which is web accessible and (excluding Internet Explorer) will require no scripting at all.

Semantic CSS3 Lightboxes

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 2013.09.12

    WordPress 3.6.1 发布,大大提升安全性能

    今天李思章博客升级到 WordPress 3…

  2. 没有图片

    2010.09.15

    伟大的Akismet遇上了伟大的GFW

    今天进博客后台,想发表一篇与教育有关的文章来…

  3. 没有图片

    2009.10.19

    WordPress评论嵌套下课 -悬浮显示评论菜鸟教程

    可以说目前网上很热门而且受关注的Wordpr…

  4. 没有图片

    2013.07.10

    WordPress主题 xSummer:淘宝客|亚马逊|当当等推广主题

    WordPress 淘宝客主题 xTaoBa…

  5. 没有图片

    2010.09.27

    微软安全软件 Microsoft Security Essentials

    通过正版验证的Windows电脑用户,可以免…

  6. 没有图片

    2013.12.29

    Debian系统下用 vsftpd 配置FTP服务完整教程

    Debian系统下用vsftpd配置FTP服…

评论

还没有评论。

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!