纯 HTML5/CSS3 解决方案的在线幻灯片展示：无需 JavaScript
用 CSS3 实现！ - 在线幻灯片展示使用纯 CSS3/HTML5 功能实现“暗盒”弹出效果
本解决方案演示了 CSS3 编码技术，使用纯 CSS3 和 HTML5 实现在线幻灯片展示，带有“暗盒”（或可选的“lightbox”）弹出效果；它不使用任何 JavaScript/jQuery。
演示
图 1. 幻灯片缩略图，演示截图
整个演示被封装在一个 .htm 文件中（参见代码清单 1）。 除了暗盒效果和幻灯片导航外，它还演示了通过 CSS3/HTML5 功能实现的各种美学增强，例如
- 颜色渐变
- 圆角
- 盒阴影
- 文本阴影
- 文本旋转
浏览器兼容性
基本上，所有支持 HTML5 标准的网络浏览器都可以运行此应用程序及其衍生版本。 特别是，以下是完全/部分兼容 HTML5 的所有主流浏览器列表
- Mozilla FireFox 4 及更高版本
- Google Chrome 10 及更高版本
- Microsoft IE 9 及更高版本（在颜色渐变和文本旋转方面注意到一些问题）
- Apple Safari 5 及更高版本
HTML 5 和 CSS 3
整个应用程序已被封装在一个文本文件中，主要是为了教学目的，提供解决方案的整体视图。 在实践中，CSS 样式可以放置在单独的文件中，遵循关注点分离的编程范例（即，将内容与格式和功能分离）。
清单 1. HTML5/CSS3
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SLIDE SHOW CSS3</title>
<meta name="Description" content="ONLINE SLIDE SHOW AS PURE HTML5/CSS3 SOLUTION, NO JAVASCRIPT" />
<meta name="Keywords" content="web design development, slide show CSS3, apple store ny " />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Author" content="Alexander Bell" />
<meta http-equiv="Copyright" content="2010-2015 Infosoft International Inc" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta name="Robots" content="all" />
<meta name="Distribution" content="global" />
<style type="text/css">
/* pop-up div covers entire area */
.divDarkBox
{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
background-color:rgba(0,0,0,0.8);
text-align:center;
z-index:101;
}
/* ! target pseudo-class is the key to solution ! */
.divDarkBox:target { display:block; }
/* virtual frame w/controls, image and caption */
.divDarkBox div
{
position:fixed;
top:10%;
left:25%;
width:50%;
height:60%;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index:102;
}
/* image caption */
.divDarkBox div h1
{
font-size:0.9em;
color:#bababa;
font-weight:normal;
margin-top:20px;
z-index:103;
-moz-text-shadow: 10px 3px 4px 6px rgba(10,10,10,0.9);
-webkit-text-shadow: 3px 4px 6px rgba(10,10,10,0.9);
text-shadow: 3px 4px 6px rgba(10,10,10,0.9);
}
/* thumbnais container */
#divThumbnails
{
position:relative;
margin: 10px 0 0 0;
height:150px;
padding-top:30px;
background-color:#cacaca;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
background: -moz-linear-gradient(top, #f0f0f0, #bababa 10%, #cacaca 49%, #909090 50%, #cacaca 50%, #cacaca 90%, #ababab);
background: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), color-stop(0.1, #bababa ), color-stop(0.49, #cacaca), color-stop(0.50, #909090), color-stop(0.50, #cacaca), color-stop(0.90, #cacaca), to(#ababab));
}
/* thumbnails image */
#divThumbnails img
{
min-width:50px;
max-width:100px;
height:100px;
padding:10px;
border: solid 1px gray;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
z-index:1;
}
/* darkbox image */
.divDarkBox img
{
padding:20px;
z-index:105;
border: solid 1px gray;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: -moz-linear-gradient(top, #dadada, #505050 5%, #bababa 50%, #303030 50%, #101010);
background: -webkit-gradient(linear, center top, center bottom, from(#dadada), color-stop(0.05, #505050), color-stop(0.5, #bababa), color-stop(0.5, #303030), to(#101010));
min-height:300px;
min-width:300px;
max-height:60%;
max-width:80%;
}
img:hover, .divDarkBox ul a:hover
{
background:#505050;
background: -moz-linear-gradient(top, #eaeaea, #505050 50%, #303030 50%, #404040);
background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea),
color-stop(0.5, #505050), color-stop(0.5, #303030), to(#404040));
}
/* darkbox nav: highest z-index */
.divPopUpMainContent ul li {display:inline;}
.divPopUpMainContent ul a {
padding:3pt;
font-size:28pt;
font-weight:700;
color:Yellow;
text-decoration:none;
border: solid 1px Gray;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index:110;
}
/* optional text: 45Deg */
.divDarkBox .divDemo {
position absolute;
top:15%;
left:0%;
font-size:4em;
color:Olive;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
}
.divPopUpMainContent { margin-top:120px; }
</style>
</head>
<body>
<h3>Click on the thumbnail image to start</h3>
<!-- NAV THUMBNAILS -->
<div id="divThumbnails">
<a href="#divDarkBox1"><img src="http://infosoft.biz/Img/AppleStore/Apple-GEDC3429_small.JPG" alt="APPLE® STORE" /></a>
<a href="#divDarkBox2"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3477_small.JPG" alt="iCIRCUIT" /></a>
<a href="#divDarkBox3"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3446_small.JPG" alt="ZENO-5000" /></a>
<a href="#divDarkBox4"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3453_small.JPG" alt="FRACTION CALCULATOR" /></a>
<a href="#divDarkBox5"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3455_small.JPG" alt="YOUTUBE PLAYER" /></a>
</div>
<!--1st -->
<div id="divDarkBox1" class="divDarkBox">
<!--OPTIONAL TEXT 45 DEG-->
<div class="divDemo">COOL DEMO!</div>
<div class="divPopUpMainContent">
<ul>
<li><a href="#">⊗</a></li> <!--CLOSE SYMBOL-->
<li><a href="#divDarkBox5">◂</a></li> <!--BACK ARROW: MOVE BACK|LAST-->
<li><a href="#divDarkBox2">▸</a></li> <!--FORWARD ARROW: MOVE NEXT-->
<li><a href="#divDarkBox5">▸▮</a></li> <!--MOVE LAST-->
</ul>
<!--FULL SIZE IMAGE: ON CLICK MOVE NEXT-->
<a href="http://infosoft.biz/bus.aspx?bus=M1" target="_blank"><img src="http://infosoft.biz/Img/AppleStore/Apple-GEDC3429.JPG" alt="APPLE® STORE IN MANHATTAN NY" /></a>
<h1>APPLE<sup>®</sup> STORE IN MANHATTAN, NY</h1>
</div>
</div>
<!--2nd-->
<div id="divDarkBox2" class="divDarkBox">
<div class="divDemo">WOW, CIRCUIT!</div>
<div class="divPopUpMainContent">
<ul>
<li><a href="#">⊗</a></li>
<li><a href="#divDarkBox1">▮◂</a></li> <!--MOVE FIRST-->
<li><a href="#divDarkBox1">⇦</a></li>
<li><a href="#divDarkBox3">⇨</a></li>
<li><a href="#divDarkBox5">▸▮</a></li> <!--MOVE LAST-->
</ul>
<a href="http://infosoft.biz/download.aspx" target="_blank"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3477.JPG" alt="iCIRCUIT SCHEMATIC DIAGRAM" /></a>
<h1>iCIRCUIT SCHEMATIC DIAGRAM EDITOR</h1>
</div>
</div>
<!-- 3rd -->
<div id="divDarkBox3" class="divDarkBox">
<div class="divDemo">VERY NICE!</div>
<div class="divPopUpMainContent">
<ul>
<li><a href="#">⊗</a></li>
<li><a href="#divDarkBox1">▮◂</a></li> <!--MOVE FIRST-->
<li><a href="#divDarkBox2">⇦</a></li>
<li><a href="#divDarkBox4">⇨</a></li>
<li><a href="#divDarkBox5">▸▮</a></li>
<li><a href="http://infosoft.biz/volta.aspx" target="_blank">LINK</a></li>
</ul>
<a href="http://infosoft.biz/volta.aspx" target="_blank"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3446.JPG" alt="ZENO-5000" /></a>
<h1>SCIENTIFIC CALCULATOR <strong>ZENO-5000</strong> (TESTING MY STUFF:)</h1>
</div>
</div>
<!-- 4th -->
<div id="divDarkBox4" class="divDarkBox">
<div class="divDemo">VERY USEFUL!</div>
<div class="divPopUpMainContent">
<ul>
<li><a href="#">⊗</a></li>
<li><a href="#divDarkBox1">▮◄</a></li> <!--MOVE FIRST-->
<li><a href="#divDarkBox3">⇦</a></li>
<li><a href="#divDarkBox5">⇨</a></li>
<li><a href="#divDarkBox5">►▮</a></li><!--MOVE LAST-->
<li><a href="http://infosoft.biz/Fractions.aspx" target="_blank">LINK</a></li><!--EXT LINK TO APP-->
</ul>
<a href="http://infosoft.biz/Fractions.aspx" target="_blank"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3453.JPG" alt="FRACTION CALCULATOR" /></a>
<h1>MOBILE FRACTION CALCULATOR</h1>
</div>
</div>
<!-- 5th -->
<div id="divDarkBox5" class="divDarkBox">
<div class="divDemo">YouTube Player</div>
<div class="divPopUpMainContent">
<ul>
<li><a href="#">⊗</a></li>
<li><a href="#divDarkBox1">▮◄</a></li>
<li><a href="#divDarkBox4">⇦</a></li>
<li><a href="#divDarkBox5">⇨</a></li>
<li><a href="#divDarkBox5">►▮</a></li><!--MOVE LAST-->
<li><a href="http://infosoft.biz/download.aspx" target="_blank">LINK</a></li><!--EXT LINK TO APP-->
</ul>
<a href="http://infosoft.biz/download.aspx" target="_blank"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3455.JPG" alt="YOUTUBE PLAYER" /></a>
<h1>EMBEDDED YOUTUBE PLAYER</h1>
</div>
</div>
</body>
</html>