CSS样式实现照片演示特效的代码

发布时间:2019-08-11编辑:脚本学堂
本文介绍用一个css样式实现照片演示特效的代码例子,要想自己也能做出这种特效,请参考一下本文例子。

照片演示特效在网上,qq空间里经常可以看到,这种效果是如何通过css样式实现的呢?请看以下代码:
 

复制代码 代码示例:

top:-1px;
width:1px;
height:1px;
overflow:hidden;
background:#efedec;
z-index:100;}

a.gallery:hover {white-space:normal; border:1px solid #fff;}
a.gallery:hover img {border:1px solid #000; z-index:100;}
a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;}

a.gallery:hover span {
display:block;
position:absolute;
width:402px;
height:290px;
top:39px;
left:170px;
padding:5px;
font-style:italic;
color:#000;
background:#fff;
z-index:100;}

a.gallery:active {border:1px solid #eee;}
a.gallery:active span, a.gallery:focus span {
display:block;
position:absolute;
width:402px;
height:290px;
top:39px;
left:170px;
padding:5px;
font-style:italic;color:#000; background:#fff; z-index:50;}
#thumbs {width:840px; height:60px;}
#pad {height:310px; width:100px;}

针对IE6以下是引用片段:
 

复制代码 代码示例:
<!--[if lte IE 6]>
<style>
#ads {display:none;}
#adsie {clear:both; text-align:center; width:750px; margin-top:10px;}

以上就是利用css实现代码特效的例子,同学们可以试着自己做一下。