<!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>
<p align="center">适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p>
<p align="center">来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</body>
</html>
css3列表FAQ问答特效.zip
版权申诉
108 浏览量
2022-11-17
21:17:47
上传
评论
收藏 100KB ZIP 举报
css3列表FAQ问答特效.zip （4个子文件） 
css3列表FAQ问答特效 
css3列表FAQ问答特效.jpg 108KB jiaoben286 
grid.png 5KB
html5.js 2KB
index.html 6KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- 部署yolov8的tensorrt模型支持检测分割姿态估计的C++源码+部署步骤.zip
- 以简单、易用、高性能为目标、开源的时序数据库，支持Linux及Windows， Time Series Database.zip
- python-leetcode面试题解之第198题打家劫舍-题解.zip
- python-leetcode面试题解之第191题位1的个数-题解.zip
- python-leetcode面试题解之第186题反转字符串中的单词II-题解.zip
- 一个基于python的web后端高性能开发框架，下载可用
- python-leetcode面试题解之第179题最大数-题解.zip
- python-leetcode面试题解之第170题两数之和III数据结构设计-题解.zip
- python-leetcode面试题解之第168题Excel表列名称-题解.zip
- python-leetcode面试题解之第167题两数之和II输入有序数组-题解.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
