css3列表FAQ问答特效

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

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

以下是 css3列表FAQ问答特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
	<title>css3列表FAQ问答特效</title>
	<style>
		body{
			margin: 80px auto;
			width: 550px;
			font: 14px 'trebuchet MS', Arial, Helvetica;
			background: #f5f5f5 url(grid.png);
		}

		.faq-section{
			margin: 40px 0;
			position: relative;
		}

		.faq-section p{
			display: none;
		}	

		.faq-section input{
			position: absolute;
			z-index: 2;
			cursor: pointer;
			opacity: 0;			
			display: none\9; /* IE8 and below */
            margin: 0;			
			width: 100%;
			height: 36px;
		}				

		.faq-section label+p{
			display: block;	
			color: #999;
			font-size: .85em;
			-webkit-transition: all .15s ease-out; 
			-moz-transition: all .15s ease-out;
			-ms-transition: all .15s ease-out;
			-o-transition: all .15s ease-out;
			transition: all .15s ease-out;
			/* Clipping text */
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;						
		}

		.faq-section input[type=checkbox]:checked~p{
			display: block;
			color: #444;
			font-size: 1em;
			/* restore clipping defaults */
			text-overflow: clip; 
			white-space: normal;
			overflow: visible;	
		}

		.faq-section label{
			font-size: 1.2em;
			background: #eee;
			display: block;
			position: relative;
			height: 20px;
			padding: 7px 10px;
			font-weight: bold;
			border: 1px solid #ddd;
			border-left: 3px solid #888;
			text-shadow: 0 1px 0 rgba(255,255,255,.5);
			-webkit-transition: all .15s ease-out; 
			-moz-transition: all .15s ease-out;
			-ms-transition: all .15s ease-out;
			-o-transition: all .15s ease-out;
			transition: all .15s ease-out;			
		}

		.faq-section label::-moz-selection{ /* remove text selection when toggle-ing */
			background: none;
		}

		.faq-section label::selection{
			background: none;
		}

		.faq-section label:hover{
			background: #f5f5f5;
		}

		.faq-section input[type=checkbox]:checked~label{
			border-color: #ff7f50;			
			background: #f5deb4;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5deb4));
			background-image: -webkit-linear-gradient(top, #fff, #f5deb4); 
			background-image: -moz-linear-gradient(top, #fff, #f5deb4); 
			background-image: -ms-linear-gradient(top, #fff, #f5deb4); 
			background-image: -o-linear-gradient(top, #fff, #f5deb4); 
			background-image: linear-gradient(to bottom, #fff, #f5deb4);
			-moz-box-shadow: 0 0 1px rgba(0,0,0,.4);
			-webkit-box-shadow: 0 0 1px rgba(0,0,0,.4);
			box-shadow: 0 0 1px rgba(0,0,0,.4);				
		}

		.faq-section label::before{
			content: '';
			position: absolute;
			right: 4px;
			top: 50%;
			margin-top: -6px;
			border: 6px solid transparent;
			border-left-color: inherit;	
		}

		.faq-section input[type=checkbox]:checked~label::before{
			border: 6px solid transparent;
			border-top-color: inherit;
			margin-top: -3px;
			right: 10px;	
		}
	</style>
    <!--[if lt IE 9]>
        <script src="html5.js"></script>
        <style>
			.faq-section label,
			.faq-section label:hover{
				cursor: default;
				background: #eee;
			}        
			body .faq-section p{
				display: block;
				color: #444;
				font-size: 1em;
				text-overflow: clip; 
				white-space: normal;
				overflow: visible;				
			}
        </style>
    <![endif]--> 	
</head>
<body>

<section class="faq-section">
    <input type="checkbox" id="q1">
    <label for="q1">Nunc nec arcu ac lacus?</label>           
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam.</p>
	<p>Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. </p>   
</section>

<section class="faq-section">
    <input type="checkbox" id="q2">
    <label for="q2">Fusce nec nibh purus?</label>           
	<p>Aliquam et tellus vel neque fringilla posuere ac non mi. Nunc mauris nunc, sollicitudin in pellentesque sed, rhoncus in nibh. Ut vestibulum consectetur tincidunt. Vestibulum facilisis tempus tortor ut ultricies. Fusce aliquet placerat massa nec tempor.</p>
	<p>Phasellus vel nunc id nisl lacinia vehicula. Maecenas quis nunc eros.</p>	
	<p>Pellentesque urna massa, aliquet a sagittis vel, eleifend ut est. Suspendisse gravida ultricies nisi, in euismod tortor consectetur ut. Phasellus sagittis, turpis quis cursus aliquet, purus dolor dictum tellus, vel dignissim lorem nibh ornare eros.</p>   
</section>

<section class="faq-section">
    <input type="checkbox" id="q3">
    <label for="q3">Vivamus posuere odio non est?</label>           
	<p>Cras semper nisi quis purus aliquam ultricies. Vivamus pellentesque ipsum non magna ultricies sed iaculis mi iaculis.</p>
	<p>Donec eu velit lectus. Aenean justo quam, faucibus non vestibulum et, tincidunt sed felis. Vivamus vehicula egestas nisl ut lacinia. Suspendisse tempor adipiscing mi. Pellentesque posuere blandit nisi eget vestibulum. </p>   
</section>

<section class="faq-section">
    <input type="checkbox" id="q4">
    <label for="q4">Aenean viverra urna eget neque?</label>           
	<p>Praesent sed nulla in magna mollis interdum a porttitor eros. Nam a diam eu massa consequat pulvinar. Donec eu orci justo, sed consequat turpis. Nam scelerisque mi et tellus vehicula bibendum. Praesent pretium tempus mi nec convallis.</p>
	<p>Pretium, augue nec convallis tempor, nulla ipsum pulvinar nisi, ut tempus ante ante nec arcu.</p>   
</section>

<section class="faq-section">
    <input type="checkbox" id="q5">
    <label for="q5">Ut porttitor leo nec velit hendrerit?</label>           
	<p>Cras semper nisi quis purus aliquam ultricies. Vivamus pellentesque ipsum non magna ultricies sed iaculis mi iaculis.</p>
	<p> Donec eu velit lectus. Aenean justo quam, faucibus non vestibulum et, tincidunt sed felis. Vivamus vehicula egestas nisl ut lacinia. Suspendisse tempor adipiscing mi. Pellentesque posuere blandit nisi eget vestibulum. </p>   
</section>
</body>
</html>

JS代码(html5.js):

/*! HTML5 Shiv vpre3.6 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed Uncompressed source:https://github.com/aFarkas/html5shiv */
(function(a,b){
	function h(a,b){
	var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;
	return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}
function i(){
	var a=l.elements;
	return typeof a=="string"?a.split(" "):a}
function j(a){
	var b={
}
,c=a.createElement,f=a.createDocumentFragment,g=f();
	a.createElement=function(a){
	if(!l.shivMethods)return c(a);
	var f;
	return b[a]?f=b[a].cloneNode():e.test(a)?f=(b[a]=c(a)).cloneNode():f=c(a),f.canHaveChildren&&!d.test(a)?g.appendChild(f):f}
,a.createDocumentFragment=Function("h,f","return function(){
	var n=f.cloneNode(),c=n.createElement;
	h.shivMethods&&("+i().join().replace(/\w+/g,function(a){
	return c(a),g.createElement(a),'c("'+a+'")'}
)+");
	return n}
")(l,g)}
function k(a){
	var b;
	return a.documentShived?a:(l.shivCSS&&!f&&(b=!!h(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{
	display:block}
audio{
	display:none}
canvas,video{
	display:inline-block;
	*display:inline;
	*zoom:1}
[hidden]{
	display:none}
audio[controls]{
	display:inline-block;
	*display:inline;
	*zoom:1}
mark{
	background:#FF0;
	color:#000}
")),g||(b=!j(a)),b&&(a.documentShived=b),a)}
var c=a.html5||{
}
,d=/^<|^(?:button|form|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i,f,g;
	(function(){
	var c=b.createElement("a");
	c.innerHTML="<xyz></xyz>",f="hidden"in c,f&&typeof injectElementWithStyles=="function"&&injectElementWithStyles("#modernizr{
}
",function(b){
	b.hidden=!0,f=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle).display=="none"}
),g=c.childNodes.length==1||function(){
	try{
	b.createElement("a")}
catch(a){
	return!0}
var c=b.createDocumentFragment();
	return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}
()}
)();
	var l={
	elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:k}
;
	a.html5=l,k(b)}
)(this,document)

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