当前位置：首页 > 网页特效 > 导航菜单

CSS3和JS响应式垂直手风琴特效

分类：导航菜单日期：2024-05-14 点击(4) 评论(0)

CSS3和JS响应式垂直手风琴特效

简介

##### HTML结构
该垂直手风琴列表的HTML结构如下。

```html
<div class="container">
  <div class="accordion">
    <dl>
      <dt>
        <a href="#accordion1" aria-expanded="false" aria-controls="accordion1"
           class="accordion-title accordionTitle js-accordionTrigger">标题1</a>
      </dt>
      <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
        <p>...</p>
      </dd>
      <dt>
        <a href="#accordion2" aria-expanded="false" aria-controls="accordion2"
           class="accordion-title accordionTitle js-accordionTrigger">标题2</a>
      </dt>
      <dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true">
        <p>...</p>
      </dd>
      <dt>
        <a href="#accordion3" aria-expanded="false" aria-controls="accordion3"
           class="accordion-title accordionTitle js-accordionTrigger">标题3</a>
      </dt>
      <dd class="accordion-content accordionItem is-collapsed" id="accordion3" aria-hidden="true">
        <p>...</p>
      </dd>
    </dl>
  </div>
</div>   
```
#####  CSS样式
该手风琴特效主要执行两个animation动画：animateIn和animateOut，分别用于手风琴项的展开和收缩时的动画效果。

```html
.animateIn {
  -webkit-animation: accordionIn 0.45s normal ease-in-out both 1;
          animation: accordionIn 0.45s normal ease-in-out both 1;
}
 
.animateOut {
  -webkit-animation: accordionOut 0.45s alternate ease-in-out both 1;
          animation: accordionOut 0.45s alternate ease-in-out both 1;
}
 
@-webkit-keyframes accordionIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.9) rotateX(-60deg);
            transform: scale(0.9) rotateX(-60deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
 
@keyframes accordionIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.9) rotateX(-60deg);
            transform: scale(0.9) rotateX(-60deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes accordionOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.9) rotateX(-60deg);
            transform: scale(0.9) rotateX(-60deg);
  }
}
@keyframes accordionOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.9) rotateX(-60deg);
            transform: scale(0.9) rotateX(-60deg);
  }
}               
```
#####  JavaScript
该手风琴特效使用JavaScript来监听手风琴项的鼠标点击或移动触摸事件，并执行相应的操作。

```html
(function(){
  var d = document,
  accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
  setAria,
  setAccordionAria,
  switchAccordion,
  touchSupported = ('ontouchstart' in window),
  pointerSupported = ('pointerdown' in window);
   
  skipClickDelay = function(e){
    e.preventDefault();
    e.target.click();
  }
 
    setAriaAttr = function(el, ariaType, newProperty){
    el.setAttribute(ariaType, newProperty);
  };
  setAccordionAria = function(el1, el2, expanded){
    switch(expanded) {
      case "true":
        setAriaAttr(el1, 'aria-expanded', 'true');
        setAriaAttr(el2, 'aria-hidden', 'false');
        break;
      case "false":
        setAriaAttr(el1, 'aria-expanded', 'false');
        setAriaAttr(el2, 'aria-hidden', 'true');
        break;
      default:
        break;
    }
  };
//function
switchAccordion = function(e) {
  console.log("triggered");
  e.preventDefault();
  var thisAnswer = e.target.parentNode.nextElementSibling;
  var thisQuestion = e.target;
  if(thisAnswer.classList.contains('is-collapsed')) {
    setAccordionAria(thisQuestion, thisAnswer, 'true');
  } else {
    setAccordionAria(thisQuestion, thisAnswer, 'false');
  }
    thisQuestion.classList.toggle('is-collapsed');
    thisQuestion.classList.toggle('is-expanded');
    thisAnswer.classList.toggle('is-collapsed');
    thisAnswer.classList.toggle('is-expanded');
   
    thisAnswer.classList.toggle('animateIn');
  };
  for (var i=0,len=accordionToggles.length; i<len; i++) {
    if(touchSupported) {
      accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
    }
    if(pointerSupported){
      accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
    }
    accordionToggles[i].addEventListener('click', switchAccordion, false);
  }
})();             
```

web299.com

CSS3和JS响应式垂直手风琴特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果