[分享]css3折叠动画

CSS3折叠动画是一种非常炫酷的效果，可以用于创意设计和网站展示等领域。折叠动画可以将内容分成几个部分，然后通过旋转、移动、缩放等CSS属性来实现折叠和展开的效果。 .accordion { bord...

CSS3折叠动画是一种非常炫酷的效果，可以用于创意设计和网站展示等领域。折叠动画可以将内容分成几个部分，然后通过旋转、移动、缩放等CSS属性来实现折叠和展开的效果。

 .accordion {
    border: 1px solid #ccc;
    overflow: hidden;
  }
  .accordion .item {
    background: #f2f2f2;
    padding: 20px;
    margin: 10px;
    font-size: 1.2em;
    border-radius: 5px;
    position: relative;
  }
  .accordion .item h2 {
    margin: 0;
    font-weight: normal;
    position: relative;
    cursor: pointer;
    z-index: 1;
  }
  .accordion .item p {
    margin: 0;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    transform: rotateX(-90deg);
    transform-origin: top;
    z-index: 0;
    background: #fff;
  }
  .accordion .item.active p {
    display: block;
    transform: rotateX(0deg);
    transition: transform .5s ease-in-out;
  }
  .accordion .item.active h2 {
    font-weight: bold;
  } 

上面是一个基本的折叠动画样式，包括一个包含多个项的容器（.accordion）和每个项的样式（.item）。每个项包括一个标题（h2标签）和一个内容区域（p标签）。

当用户点击标题时，项将扩展并显示内容区域。相反，如果用户再次单击标题，则内容将折叠并隐藏。这是通过JavaScript代码来实现的：

 const items = document.querySelectorAll('.accordion .item');

  items.forEach(item => {
    const title = item.querySelector('h2');

    title.addEventListener('click', () => {
      item.classList.toggle('active');
    });
  }); 

该代码遍历所有项并将事件侦听器添加到标题元素。当用户单击标题时，代码将active类添加到项的元素，这将触发CSS过渡并展开内容区域。

通过使用CSS3和JavaScript，我们可以创建出一个非常漂亮和富有交互性的折叠动画效果。无论是用于网站设计还是其他领域，折叠动画都是一个非常实用和具有吸引力的效果。