CSS3文字手风琴展开效果特效代码

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

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

以下是 CSS3文字手风琴展开效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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%;}

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