纯CSS实现的图片滚动，见过吗？_图片特效特效

纯CSS实现的图片滚动，见过吗？其实也不能称之为滚动，说成是图片提示可能更贴切一些，其实CSS是不能实现动态滚动的，只能借助于JS或JQUERY等插件或脚本，不过本款用来作一个带提示的图片特效相当不错。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>纯CSS实现的横向图片滑动菜单</title>
<style type="text/css">
#menu {
 margin:40px 15px; 
 padding:0; 
 width:49em;
 height:8.5em;
 overflow:hidden; 
 background:#000;
 }
#menu li {
 display:inline;
 list-style-type:none; 
 }
#menu li a {
 display:block;
 float:left;
 text-decoration:none; 
 margin:0; 
 }
#menu li a img {
 opacity:0.7;
 margin:0.5em;
 border:0;
 float:left;
 }
#menu li a span {
 display:none; 
 }
#menu li a:hover {
 background:#000;
 }
#menu li a:hover img {
 opacity:1;
 }
#menu li a:hover span {
 width:11em;
 color:#aaa;
 display:block; 
 cursor:pointer;
 float:left;
 }
#menu .h2 {
 margin:0 5px; 
 padding:0; 
 color:#fc0; 
 font-variant:small-caps; 
 font-size:1.25em; 
 border:0;
 }
#menu .h3 {
 margin:0 5px; 
 padding:0; 
 font-size:1.1em; 
 color:#0aa;
 }
.outer {
 background:transparent; 
 font-size:0.9em;
 width:45em;
 margin:0 auto;
 }

</style>
</head>
<body>
<div class="outer">
 <ul id="menu">
 <li>
 <a href="/">
 <img src="http://p1.mb5u.com/texiao/1/20110225160454210.jpg" alt="painting" title="painting" />
 
 Indexs 
 (1839-1906) 
 homepage 
 </a>
 </li>
 <li>
 <a href="/jscss/">
 <img src="http://p1.mb5u.com/texiao/1/20110225160454211.jpg" alt="painting" title="painting" />
 
 SiteIndexs 
 (1869-1954) 
 特效精选
 
 </a>
 </li>
 <li>
 <a href="/">
 <img src="http://p1.mb5u.com/texiao/1/20110225160454212.jpg" alt="painting" title="painting" />
 
 源码下载 
 (1775-1851) 
 高质量源代码.
 
 </a>
 </li>
 <li>
 <a href="/jscss">
 <img src="http://p1.mb5u.com/texiao/1/20110225160454213.jpg" alt="painting" title="painting" />
 
 Claude Monet 
 (1840-1926) 
 Never abandoned his Impressionist painting style.
 
 </a>
 </li>
 </ul>
</div>
</body>
</html>

所属频道：图片特效特效/更新时间：2012-12-07

[收藏][报错][返回列表]

纯CSS实现的图片滚动，见过吗？_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些