以下是 CSS3文字手风琴展开效果特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3文字手风琴展开效果</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="home">
<ul class="accordion">
<li class="slide-01">
<div>
<h2>Slide one</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce
posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget
placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna
molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat
lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo
ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate
sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros.
Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent
at magna non massa dapibus scelerisque in eu lorem.</p>
</div>
</li>
<li class="slide-02">
<div>
<h2>Slide two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce
posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget
placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna
molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat
lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo
ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate
sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros.
Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent
at magna non massa dapibus scelerisque in eu lorem.</p>
</div>
</li>
<li class="slide-03">
<div>
<h2>Slide three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce
posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget
placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna
molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat
lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo
ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate
sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros.
Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent
at magna non massa dapibus scelerisque in eu lorem.</p>
</div>
</li>
<li class="slide-04">
<div>
<h2>Slide four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce
posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget
placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna
molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat
lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo
ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate
sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros.
Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent
at magna non massa dapibus scelerisque in eu lorem.</p>
</div>
</li>
<li class="slide-05">
<div>
<h2>Slide five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce
posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget
placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna
molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat
lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo
ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate
sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros.
Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent
at magna non massa dapibus scelerisque in eu lorem.</p>
</div>
</li>
</ul>
<ul class="accordion" id="vertical">
<li class="slide-01">
<div>
<h2>Slide one</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce
posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget
placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna
molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat
lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo
ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate
sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros.
Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent
at magna non massa dapibus scelerisque in eu lorem.</p>
</div>
</li>
<li class="slide-02">
<div>
<h2>Slide two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce
posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget
placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna
molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat
lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo
ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate
sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros.
Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent
at magna non massa dapibus scelerisque in eu lorem.</p>
</div>
</li>
<li class="slide-03">
<div>
<h2>Slide three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce
posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget
placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna
molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat
lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo
ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate
sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros.
Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent
at magna non massa dapibus scelerisque in eu lorem.</p>
</div>
</li>
<li class="slide-04">
<div>
<h2>Slide four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce
posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget
placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna
molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat
lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo
ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate
sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros.
Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent
at magna non massa dapibus scelerisque in eu lorem.</p>
</div>
</li>
<li class="slide-05">
<div>
<h2>Slide five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce
posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget
placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna
molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat
lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo
ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate
sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros.
Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent
at magna non massa dapibus scelerisque in eu lorem.</p>
</div>
</li>
</ul>
</body>
</html>
CSS代码(style.css):
/*------------------------------------*\RESET\*------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,dfn,th,var{font-style:normal;font-weight:normal;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/*------------------------------------*\MAIN\*------------------------------------*/
html{font-family:Calibri,Arial,sans-serif;background:url(http://dl.dropbox.com/u/2629908/adaptive/img/css/grid.png) top center repeat-y #fff;background:#fff;color:#666;height:101%;font-size-adjust:0.45;}
body{width:940px;padding:100px 10px;margin:0 auto;}
h1{font-weight:bold;font-size:2em;}
h2{font-weight:bold;font-size:1.5em;}
small{color:#ccc;}
a{color:#6b0c36;text-decoration:none;font-weight:bold;}
a:hover{text-decoration:underline;}
p{margin-bottom:20px;}
/*------------------------------------*\ACCORDION\*------------------------------------*/
.accordion{width:940px;overflow:hidden;list-style:none;margin-bottom:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.25);}
.accordion li{float:left;width:20%;overflow:hidden;height:250px;-moz-transition:width 0.2s ease-out;-webkit-transition:width 0.2s ease-out;-o-transition:width 0.2s ease-out;transition:width 0.2s ease-out;}
.accordion li:first-of-type{-moz-border-radius:10px 0 0 10px;-webkit-border-radius:10px 0 0 10px;-o-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px;}
.accordion li:last-of-type{-moz-border-radius:0 10px 10px 0;-webkit-border-radius:0 10px 10px 0;-o-border-radius:0 10px 10px 0;border-radius:0 10px 10px 0;}
.accordion div{padding:10px;}
.accordion:hover li{width:10%;}
.accordion li:hover{width:60%;}
.slide-01{background:red;color:white;}
.slide-02{background:orange;color:white;}
.slide-03{background:yellow;color:#333;text-shadow:none;}
.slide-04{background:green;color:white;}
.slide-05{background:blue;color:white;}
/*------------------------------------*\VERTICAL\*------------------------------------*/
#vertical{width:940px;height:300px;}
#vertical li{height:20%;width:100%;-moz-transition:height 0.2s ease-out;-webkit-transition:height 0.2s ease-out;-o-transition:height 0.2s ease-out;transition:height 0.2s ease-out;}
#vertical li:first-of-type{-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;-o-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;}
#vertical li:last-of-type{-moz-border-radius:0 0 10px 10px;-webkit-border-radius:0 0 10px 10px;-o-border-radius:0 0 10px 10px;border-radius:0 0 10px 10px;}
#vertical:hover li{height:10%;width:100%;}
#vertical li:hover{height:60%;width:100%;}
分享到QQ
分享到微博
微信扫一扫
