CSS3 Gallery Lightbox
这个Gallery Lightbox同样没有使用js脚本代码仅使用了CSS代码实现,这个效果初看有些许复杂,一开始不太清楚其实现原理,但仔细看看代码,还是能整明白的。功能主要依赖于css的选择器,以及配合锚点定位来实现。其中很关键一步是HTML的结构,特别是图片的点击播放效果,顺序不能搞错,不然效果无法实现。不过这个效果有一个致命的缺点,那就是对图片的大小有所限制,无法实现图片的自应大小,如果你够有信心的话,可以尝试一下不限制宽度,能否实现这个效果。另外一点,CSS实现的效果,当然没有js实现的效果那么流畅,不过当作挑战性的学习,还是不错的,你不妨一试。
HTML Code:
- <a href="#url" class="clickbox"><img src="1.jpg" alt="pic1"><span>Click Here</span></a>
- <b class="lightbox">
- <b class="light"></b>
- <b class="box">
- <div id="gallery">
- <div id="fullsize">
- <div id="pic1" class="hz">
- <a class="left" href="#pic10"></a>
- <img src="1.jpg" alt="pic1">
- <a class="right" href="#pic2"></a>
- <p>Some descriptive text</p>
- </div>
- <div id="pic2" class="vt">
- <a class="left" href="#pic1"></a>
- <img src="2.jpg" alt="pic2">
- <a class="right" href="#pic3"></a>
- <p>Some more descriptive text</p>
- </div>
- <div id="pic3" class="vt">
- <a class="left" href="#pic2"></a>
- <img src="3.jpg" alt="pic3">
- <a class="right" href="#pic4"></a>
- <p>Another line of descriptive text</p>
- </div>
- <div id="pic4" class="hz">
- <a class="left" href="#pic3"></a>
- <img src="4.jpg" alt="pic4">
- <a class="right" href="#pic5"></a>
- <p>Some more descriptive text</p>
- </div>
- <div id="pic5" class="vt">
- <a class="left" href="#pic4"></a>
- <img src="5.jpg" alt="pic5">
- <a class="right" href="#pic6"></a>
- <p>This can be any text and as long as you like. It will wrap onto a second and third line if it is too long.</p>
- </div>
- <div id="pic6" class="vt">
- <a class="left" href="#pic5"></a>
- <img src="6.jpg" alt="pic7">
- <a class="right" href="#pic7"></a>
- <p>Further descriptive text</p>
- </div>
- <div id="pic7" class="hz">
- <a class="left" href="#pic6"></a>
- <img src="7.jpg" alt="pic7">
- <a class="right" href="#pic8"></a>
- <p>Some more descriptive text</p>
- </div>
- <div id="pic8" class="hz">
- <a class="left" href="#pic7"></a>
- <img src="8.jpg" alt="pic8">
- <a class="right" href="#pic9"></a>
- <p>Yet more descriptive text</p>
- </div>
- <div id="pic9" class="hz">
- <a class="left" href="#pic8"></a>
- <img src="9.jpg" alt="pic9">
- <a class="right" href="#pic10"></a>
- <p>Some more descriptive text</p>
- </div>
- <div id="pic10" class="vt">
- <a class="left" href="#pic9"></a>
- <img src="10.jpg" alt="pic10">
- <a class="right" href="#pic1"></a>
- <p>Some more descriptive text</p>
- </div>
- </div>
- </div>
- <i>CLOSE</i>
- </b>
- </b>
CSS CODE
- body {
- background: url(black-bg.png) repeat 0 0;
- }
- .clickbox,
- .clickbox:visited,
- .clickbox:hover {
- text-decoration: none;
- font:bold 20px/40px georgia, sans-serif;
- color: #00c;
- }
- .clickbox:hover {
- text-decoration: underline;
- }
- .clickbox img {
- display:block;
- border: 0;
- }
- .clickbox + b {
- display: block;
- }
- .clickbox {
- border: 5px solid #fff;
- border-radius: 5px;
- margin: 50px auto;
- background: #fff;
- display: block;
- width: 360px;
- }
- .clickbox img,
- .clickbox span {
- display:block;
- text-align: center;
- }
- .clickbox + .lightbox {
- position:absolute;
- left:-99999px;
- top:0;
- cursor:default;
- z-index:500;
- }
- .clickbox + .lightbox .light {
- position:absolute;
- left:0;
- top:0;
- width:100%;
- }
- .clickbox + .lightbox .box {
- position:absolute;
- left:0;
- width:100%;
- text-align:center;
- height:300px;
- top:20px;
- }
- .clickbox:active,
- .clickbox:focus {
- color:red
- }
- .clickbox:active + .lightbox {
- left:0;
- width:100%;
- height:100%;
- }
- .clickbox + .lightbox:hover,
- .clickbox:focus + .lightbox {
- position:fixed;
- left:0;
- width:100%;
- height:100%;
- }
- .clickbox + .lightbox:hover .light,
- .clickbox:active + .lightbox .light,
- .clickbox:focus + .lightbox .light {
- background:#000;
- width:100%;
- height:100%;
- filter: alpha(opacity=75);
- filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
- opacity:0.75;
- }
- .clickbox + .lightbox i {
- display:block;
- width:100px;
- height:20px;
- position:fixed;
- right:-100px;
- top:0;
- z-index:500;
- color:#000;
- font:normal normal 14px/20px arial, sans-serif;
- text-align:center;
- background:#fff;
- border-radius: 6px;
- }
- .clickbox + .lightbox:hover i,
- .clickbox:active + .lightbox i,
- .clickbox:focus + .lightbox i {
- right:50%;
- margin-right:-50px;
- top:5px;
- }
- .clickbox + .lightbox + #close {
- display:block;
- position:fixed;
- width:100px;
- height:20px;
- overflow:hidden;
- right:-100px;
- top:10px;
- z-index:1000;
- background:url(trans.gif);
- cursor:pointer;
- }
- .clickbox + .lightbox:hover + #close,
- .clickbox:active + .lightbox + #close,
- .clickbox:focus + .lightbox + #close {
- right:50%;
- margin-right:-50px;
- top:5px;
- }
- #gallery {
- display:inline-block;
- position:relative;
- overflow:hidden;
- }
- #gallery #fullsize {
- width:480px;
- height:480px;
- overflow:scroll;
- overflow-y:hidden;
- margin-bottom:-18px;
- }
- #gallery #fullsize div {
- width:480px;
- height:480px;
- position:relative;
- }
- #gallery #fullsize div img {
- display:block;
- margin:0 auto;
- border:0;
- padding:10px 10px 0 10px;
- background:#fff;
- border:1px solid #000;
- border-width:1px 1px 0 1px;
- }
- #gallery #fullsize div a {
- display:block;
- top:20px;
- position:absolute;
- outline:0;
- z-index:500;
- background:url(trans.gif);
- }
- #gallery #fullsize div.vt a.left {
- height:360px;
- width:135px;
- position:absolute;
- left:105px;
- }
- #gallery #fullsize div.vt a.right {
- height:360px;
- width:135px;
- position:absolute;
- left:240px;
- }
- #gallery #fullsize div.hz a.left {
- height:270px;
- width:180px;
- position:absolute;
- left:60px;
- }
- #gallery #fullsize div.hz a.right {
- height:270px;
- width:180px;
- position:absolute;
- left:240px;
- }
- #gallery #fullsize div a.left:hover {
- background:url(prev.png) no-repeat left 20px;
- }
- #gallery #fullsize div a.right:hover {
- background:url(next.png) no-repeat right 20px;
- }
- #gallery #fullsize div p {
- background:#fff;
- margin:0 auto;
- padding:10px;
- border:1px solid #000;
- border-width:0 1px 1px 1px;
- font-weight:normal;
- color:#444;
- }
- #gallery #fullsize div.vt p {
- width:270px;
- }
- #gallery #fullsize div.hz p {
- width:360px;
- }
Demo:http://www.w3cplus.com/demo/css3/galleryLightbox/index.html
下载:
【CSS3 Gallery Lightbox】相关文章
2. Swipebox:用于触屏设备的精美 jQuery Lightbox 插件
3. FancyBox - 经典的 jQuery Lightbox 插件
4. Swipebox:用于触屏设备的精美 jQuery Lightbox 插件
5. 令人印象深刻的 jQuery 模态框插件 – iLightBox
6. 用于触屏设备的精美 jQuery Lightbox 插件
8. 令人印象深刻的 jQuery 模态框插件 – iLightBox
9. 用于触屏设备的精美 jQuery Lightbox 插件
本文来源:https://www.51html5.com/a899.html
﹝CSS3 Gallery Lightbox﹞相关内容
- CSS3灵活的盒子模型(Flexible Box Module)–1
- CSS3灵活的盒子模型(Flexible Box Module)–2
- CSS3灵活的盒子模型(Flexible Box Module)–1
- CSS3灵活的盒子模型(Flexible Box Module)–2
- 使用 GistBox 轻松组织和管理你的代码片段
- Fight or Flight(战与逃)
- 使用CSS3 Flexbox布局
- CSS3+jQuery的图像画廊Photobox
- CSS3+jQuery的图像画廊Photobox
- Firefox Nightly版支持HTML5全屏API