用CSS做的图片滚动下拉效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是用CSS做的图片滚动下拉效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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" content="text/html; charset=gb2312" />
<meta name="Copyright" content="程序员设计师联盟淘宝店" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为用CSS做的图片滚动下拉效果，属于站长常用代码" />
<title>用CSS做的图片滚动下拉效果</title>
<style type="text/css">
ul {
	border: 3px double #999;
	height: 300px;
	width: 200px;
	overflow: auto;
	overflow-x: hidden;
	padding: 2px;
	scrollbar-3dlight-color:#cccccc;
	scrollbar-arrow-color:#ffffff; 
	scrollbar-base-color:#cccccc; 
	scrollbar-darkshadow-color:#cccccc; 
	scrollbar-face-color:#ccc; 
	scrollbar-highlight-color:#ffffff; 
	scrollbar-shadow-color:#ffffff;		
}
li {
	list-style-type: none;
}
li a img {
	filter: Alpha(Opacity=70);
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	width:180px;
	height:50px;
	padding: 2px;	
}
li a:hover img {
	filter: Alpha(Opacity=100);
	border: 1px solid #666666;
	padding: 1px;
}
</style>
</head>

<body><div align="center">
<ul>
  <li><a href="#"><img src="images/01.jpg"></a></li>
  <li><a href="#"><img src="images/02.jpg"></a></li>
  <li><a href="#"><img src="images/03.jpg"></a></li>
  <li><a href="#"><img src="images/04.jpg"></a></li>
  <li><a href="#"><img src="images/05.jpg"></a></li>
  <li><a href="#"><img src="images/06.jpg"></a></li>
  <li><a href="#"><img src="images/07.jpg"></a></li>
  <li><a href="#"><img src="images/08.jpg"></a></li>
  <li><a href="#"><img src="images/09.jpg"></a></li>
  <li><a href="#"><img src="images/10.jpg"></a></li>              
</ul>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)