css3透明滑动手风琴特效代码

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

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

以下是 css3透明滑动手风琴特效代码的示例演示效果:

当前平台(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=utf-8" />
<title>css3透明滑动手风琴</title>
<link rel="stylesheet" href="css/lanrenzhijia.css" type="text/css" media="screen" />
</head>
<body>
<div id="lanrenzhijia">
  <ul class="tutorialMenu">
    <li id="coffeecards">
      <h2><a href="#coffeecards">CoffeeCards</a></h2>
      <p><span>CSS3 Eigenschaften: Transform &amp; Transition Modules, ...</span></p>
    </li>
    <li id="blogcomments">
      <h2><a href="#blogcomments">BlogComments</a></h2>
      <p><span>CSS3 Eigenschaften: Border-Radius, Box-Shadow &amp; Animation Module, ...</span></p>
    </li>
    <li id="onlineform">
      <h2><a href="#onlineform">OnlineForm</a></h2>
      <p><span>CSS3 Eigenschaften: MediaQueries, Transform &amp; Transition Modules, ...</span></p>
    </li>
  </ul>
</div>
</body>
</html>

CSS代码(lanrenzhijia.css):

/* �������������֮�� www.lanrenzhijia.com */
body{margin:0;padding:0;background:url(../images/lanrenzhijia_bg.png) 0 0 repeat;font:12px "Yanone Kaffeesatz",arial,serif;}
#lanrenzhijia{height:auto;margin:0 auto;width:500px;}
h1{padding:20px 10px;margin:0 0 20px 0;font-size:24px;font-weight:normal;background:rgb(144,144,144);background:rgba(255,255,255,.1);color:#FFF;}
h1 a{color:#ff7e00;font-size:20px;}
.tutorialMenu{padding:10px 0;margin:0;list-style-type:none;}
.tutorialMenu h2{margin:5px 0;padding:0;}
.tutorialMenu h2 a{font-size:18px;display:block;font-weight:normal;color:#FFF;text-decoration:none;margin:0;padding:10px;background:rgb(144,144,144);background:rgba(255,255,255,.3);position:relative;}
.tutorialMenu:not(:target) h2 a{background:rgb(59,59,59);background:rgba(0,0,0,.4);position:relative;}
.tutorialMenu h2 a:hover,.tutorialMenu h2 a:active,.tutorialMenu h2 a:focus{background-color:rgb(59,59,59);background-color:rgba(255,255,255,.3);}
.tutorialMenu:target p,.tutorialMenu:not(:target) p{padding:0;margin:0;height:0;overflow:hidden;-moz-transition:height 1.5s ease-in;-webkit-transition:height 1.5s ease-in;-o-transition:height 1.5s ease-in;transition:height 1.5s ease-in;}
.tutorialMenu:target p{height:295px;}
.tutorialMenu #coffeecards p,.tutorialMenu #blogcomments p,.tutorialMenu #onlineform p{position:relative;background:url(../images/lanrenzhijia1.jpg) top left no-repeat;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.tutorialMenu #blogcomments p{background-image:url(../images/lanrenzhijia2.jpg);}
.tutorialMenu #onlineform p{background-image:url(../images/lanrenzhijia3.jpg);}
.tutorialMenu p{height:295px;}
.tutorialMenu p span{font-size:14px;display:block;height:35px;padding:15px 0 0 0;text-indent:10px;position:absolute;bottom:0;left:0;width:100%;color:#FFF;background:rgb(144,144,144);background:rgba(0,0,0,.6);-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;}
h1,.tutorialMenu h2 a,.tutorialMenu:not(:target) p{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.reload{display:block;padding:60px 0 0 0;color:#fff;font-size:14px;}
/* �������������֮�� www.lanrenzhijia.com */

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