Bootstrap3 Collapse.js 内容折叠/展开渐变动效

// Collapse.js Documentation - http://getbootstrap.com/javascript/#collapse // Collapse.js Code - http://scottdev.cloudapp.net/rollseal/web/javascripts/bootstrap/collapse.js

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2235
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

main {
  width: 50%;
  margin: 0 auto;
  padding: 25px 0;
  line-height: 2em;
}

.notes {
  color: #ccc;
  margin: 50px 0 40px 0;
  transition: all .2s ease;
}

.notes:hover {
  cursor: help;
  margin: 40px 0 50px 0;
  transform: scale(1.03);
}

.notes:hover h1 {
  color: #00BFFF;
}

.notes:hover dl {
  color: #333;
}

h2 {
  border-bottom: 2px solid #eeeeee;
  transition: border-color .2s ease-in-out;
  padding: 0 0 10px 0;
}

h2:hover {
  cursor: pointer;
  border-color: #00BFFF;
}

dd {
  margin-bottom: 10px;
}

ul, ol {
  padding-left: 20px;
}

.accordionContent {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0;
  -webkit-transition-property: max-height, opacity;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: .5s;
  transition-property: max-height, opacity;
  transition-timing-function: ease-out;
  transition-duration: .5s;
}

.accordionVisible {
  max-height: 2000px;
  opacity: 1;
}

.accordionContainer {
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}

.accordionContainer p:last-child, .accordionContainer ul:last-child {
  margin-bottom: 0;
}

.accordionTrigger {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<main>
  <section class="notes">
  <h1>Collapsible Content</h1>
    <dl class="dl-horizontal">
      <dt>Objective</dt>
      <dd>Toggleable content that has an icon associated with the content being visible or hidden ( + / - ).</dd>
  </section>

<section class="contentGroup">
    <h2 class="accordionTrigger">Category One<i class="fa pull-right fa-plus"></i></h2>
    <p>Always visible content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia.</p>
    <span class="accordionContent">
      <div class="accordionContainer">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia.</p>
      </div>
    </span> 
  </section>
  
  <section class="contentGroup">
	<h2 class="accordionTrigger">Category Two<i class="fa pull-right fa-plus"></i></h2>
	<p>Always visible content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia.</p>
	<span class="accordionContent">
    <div class="accordionContainer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia.</p>
    </div>
  </span> 
</section>
  
  <section class="contentGroup">
	<h2 class="accordionTrigger">Category Three<i class="fa pull-right fa-plus"></i></h2>
	<p>Always visible content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia.</p>
	<span class="accordionContent">
    <div class="accordionContainer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia.</p>
    </div>
  </span> 
</section>
  
  <section class="contentGroup">
	<h2 class="accordionTrigger">Category Four<i class="fa pull-right fa-plus"></i></h2>
	<p>Always visible content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia.</p>
	<span class="accordionContent">
    <div class="accordionContainer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia.</p>
    </div>
  </span> 
</section>
  
</main>

// Collapse.js Documentation - http://getbootstrap.com/javascript/#collapse // Collapse.js Code - http://scottdev.cloudapp.net/rollseal/web/javascripts/bootstrap/collapse.js

编辑器支持Emmet

快捷键

// Collapse.js Documentation - http://getbootstrap.com/javascript/#collapse // Collapse.js Code - http://scottdev.cloudapp.net/rollseal/web/javascripts/bootstrap/collapse.js

three.js webgpu渲染器加载gltf模型代码示例（Chrome 113版本以上）

three.js + openlayers gis 3d example

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：