純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 id="75hb5x5" 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訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些