上一篇
下一篇
纯CSS构造Tips效果补遗（二）
作者:飘零雾雨 日期:2007-11-20
转载请注明出处，css探索之旅-飘零雾雨的庄园
这几天胡乱逛的时候，无意在flickr的幻灯片页面底部找一个很好玩的东东，一个很帅的图片显示。一时手痒，也写了个纯CSS构造Tips图片展示效果。
有的时候，一个东西不是做不到而是想不到。其实这个效果做起来还是很简单的，基本上都是在之前几篇Tips文章上的变种。
没仔细看它的实现代码，顺手也做了一个效果类似的DEMO，有兴趣的同学可以瞧瞧。
效果演示：［http://www.doyoe.com/model/xhtmlcss/style/tips/tips3.htm］
CSS部分：
.dytips{
overflow:hidden;
width:692px;
margin:0 auto;
padding:175px 120px 10px;
background:#333;
voice-family:"\"}\"";
voice-family:inherit;
width:452px;
}
.dytips a{
position:relative;
float:left;
width:50px;
margin:0 3px;
text-decoration:none;
}
.dytips img{
width:50px;
height:50px;
border:none;
vertical-align:top;
filter:alpha(opacity=70);
-moz-opacity:.7;
opacity:.7;
}
.dytips span img{
width:240px;
height:150px;
border:3px solid #fff;
}
.dytips a span{
display:none;
}
.dytips a:hover{
background:none;
}
.dytips a:hover span{
display:block;
position:absolute;
top:-165px;
left:-98px;
width:246px;
height:161px;
background:url(skin/point.gif) center bottom no-repeat;
}
.dytips a:hover img{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
XHTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>纯CSS构造Tips图片展示效果 - Powered by 飘零雾雨</title>
<meta name="description" content="这是一个纯构造的tips相册图片展示效果" />
<meta name="keywords" content="纯css, 图片展示, 相册, tips" />
<meta name="Author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
</head>
<body>
<h1>纯CSS构造Tips图片展示效果：</h1>
<p>请将鼠标移动到以下图片上：</p>
<div class="dytips">
<a href="?" title="Css Tips"><img src="images/1.jpg" alt="Css Tips" />
<span><img src="images/1.jpg" alt="Css Tips" /></span></a>
<a href="?" title="Css Tips"><img src="images/2.jpg" alt="Css Tips" />
<span><img src="images/2.jpg" alt="Css Tips" /></span></a>
<a href="?" title="Css Tips"><img src="images/3.jpg" alt="Css Tips" />
<span><img src="images/3.jpg" alt="Css Tips" /></span></a>
<a href="?" title="Css Tips"><img src="images/1.jpg" alt="Css Tips" />
<span><img src="images/1.jpg" alt="Css Tips" /></span></a>
<a href="?" title="Css Tips"><img src="images/2.jpg" alt="Css Tips" />
<span><img src="images/2.jpg" alt="Css Tips" /></span></a>
<a href="?" title="Css Tips"><img src="images/3.jpg" alt="Css Tips" />
<span><img src="images/3.jpg" alt="Css Tips" /></span></a>
<a href="?" title="Css Tips"><img src="images/1.jpg" alt="Css Tips" />
<span><img src="images/1.jpg" alt="Css Tips" /></span></a>
<a href="?" title="Css Tips"><img src="images/2.jpg" alt="Css Tips" />
<span><img src="images/2.jpg" alt="Css Tips" /></span></a>
</div>
</body>
</html>
文章来自: 
引用通告: 
Tags: