二十多种折叠选项卡打开关闭效果代码-html代码-BFW代码库

代码语言：html
所属分类：选项卡
代码描述：二十多种折叠选项卡打开关闭效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>


[data-css-icon] {
        --animdur: .3s;
  --loading-animdur: 0.8s;
        --animtf: ease-in;
        --bdw: 2px;
  --bdrs: 50%;
  --bgc: transparent;
        --c: currentcolor;
  --dots-bgc: silver;
  --dots-size: 0.5rem;
  --icon-size: 1rem;
        --size: 2.5rem;

        align-items: center;
  cursor: pointer;
        display: flex;
        justify-content: space-between;
}
[data-css-icon] i {
  align-items: center;
  background-color: var(--bgc);
  border-radius: var(--bdrs);
  box-sizing: border-box;
  display: inline-flex;
  height: var(--size);
  justify-content: center;
  position: relative;
  transition: background-color var(--animdur) var(--animtf);
  width: var(--size);
}
[data-css-icon] i::after,
[data-css-icon] i::before {
  transform-origin: 50% 50%;
        transition: all var(--animdur) var(--animtf);
}

[data-css-icon*="down"] i::after,
[data-css-icon*="right"] i::after {
  background: transparent;
        border-color: var(--c);
        border-style: solid;
  box-sizing: border-box;
        content: '';
        display: inline-block;
        height: var(--icon-size) ;
        margin: 0;
  position: relative;
        width: var(--icon-size);
}
[data-css-icon*="down"] i::after {
        border-width: 0 var(--bdw) var(--bdw) 0;
  top: calc(0px - (var(--icon-size) / 4));
  transform: rotate(45deg);
}
[data-css-icon*="right"] i::after {
        border-width: var(--bdw) var(--bdw) 0 0;
  right: calc((var(--icon-size) / 4));
  top: 0;
        transform: rotate(45deg);
}

[data-css-icon*="equals"] i::after,
[data-css-icon*="equals"] i::before,
[data-css-icon*="cross"] i::after,
[data-css-icon*="cross"] i::before,
[data-css-icon*="menu"] i,
[data-css-icon*="menu"] i::after,
[data-css-icon*="menu"] i::before,
[data-css-icon*="plus"] i::after,
[data-css-icon*="plus"] i::before {
  /* Width need to be the diagonal of the down-arrow side-length (--size): sqrt(2) * --size. */
        --w: calc(var(--icon-size) * 1.4142135623730950488016887242097);
        background: var(--c);
        content: '';
        height: var(--bdw);
        position: absolute;
        width: var(--w);
}
[data-css-icon*="cross"] i::before,
[data-css-icon*="plus"] i::before {
        transform: rotate(90deg);
}
[data-css-icon*="equals"] i {
  --m: 4px;
}
[data-css-icon*="equals"] i::after {
  transform: translateY(var(--m));
}
[data-css-icon*="equals"] i::before {
  transform: translateY(calc(0px - var(--m)));
}
[data-css-icon*="dots"],
[data-css-icon*="menu"] {
  height: var(--size);
}
[data-css-icon*="menu"] i {
  --bdrs: 0;
  --m: 7px;
  position: relative;
  right: calc((var(--size) - var(--w)) / 2);
}
[data-css-icon*="menu"] i::after {
  top: var(--m);
}
[data-css-icon*="menu"] i::before {
  top: calc(0px - var(--m));
}

[data-css-icon*="dots"] i,
[data-css-icon*="dots"] i::after,
[data-css-icon*="dots"] i::before {
  animation: dots var(--loading-animdur) infinite alternate;
  background-color: var(--c);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: var(--dots-size);
  width: var(--dots-size);
}
[data-css-icon*="dots"] i {
  animation-delay: var(--loading-animdur);
  position: relative;
  right: calc((var(--size) - var(--dots-size)) / 4);
}
[data-css-icon*="dots"] i::after {
  animation-delay: 0s;
  left: calc(0px - (var(--dots-size) * 3));
  position: absolute;
}
[data-css-icon*="dots"] i::before {
  animation-delay: calc(var(--loading-animdur) / 2);
  left: calc(0px - (var(--dots-size) * 1.5));
  position: absolute;
}

[data-css-icon*="spin"] i::after {
  animation: spin var(--loading-animdur) infinite linear;
  border-radius: 50%;
  border: var(--bdw) solid var(--dots-bgc);
  border-left: var(--bdw) solid var(--c);
  content: "";
  height: var(--icon-size);
  transform: translateZ(0);
  width: var(--icon-size);
}

/* STATE */
[open] > summary > [data-css-icon*="cross"] i::after {
        transform: rotate(45deg);
}
[open] > summary > [data-css-icon*="cross"] i::before {
  transform: rotate(135deg);
}
[open] > summary > [data-css-icon*="down"] i::after {
  top: var(--bdw);
        transform: rotate(45deg) scale(-1) ;
}
[open] > summary > [data-css-icon*="right"] i::after {
  right: 0;
  top: calc(0px - (var(--icon-size) / 4));
        transform: rotate(135deg);
}
[open] > summary > [data-css-icon*="plus"] i::after {
        transform: rotate(180deg);
}
[open] > summary > [data-css-icon*="plus"] i::before {
        transform: rotate(-0deg);
}

[open] > summary > [data-css-icon*="equals"] i::after { transform: rotate(-45deg); }
[open] > summary > [data-css-icon*="equals"] i::before { transform: rotate(45deg); }

[open] > summary > [data-css-icon*="menu"] i { background-color: transparent; }
[open] > summary > [data-css-icon*="menu"] i::after { transform: translateY(calc(0px - var(--m))) rotate(-45deg); }
[open] > summary > [data-css-icon*="menu"] i::before { transform: translateY(var(--m)) rotate(45deg); }

/* RTL: inset-block-end fails */
[dir="rtl"] [data-css-icon*="right"] i::after {
        left: calc((var(--icon-size) / 4));
}
[dir="rtl"] [data-css-icon*="menu"] i {
        left: 0.5rem;
  right: auto;
}

/* MODIFIERS */
[data-css-icon*="outline"] i {
  border: var(--bdw) solid var(--c);
}
[data-css-icon*="fill"] {
  --bgc: hsl(195, 10%, 30%);
  --c: hsl(195, 10%, 95%);
}
[data-css-icon*="square"] {
  --bdrs: 5px;
}

/* For this demo only */
body { font-family: system-ui, sans-serif; padding: 1rem; }
button, details { width: 25rem; }
button { font-family: inherit; font-size: inherit; }
details {
  height: var(--collapsed);
  overflow: hidden;
  transition: height 300ms cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
details[open] {
  height: var(--expanded);
}
button,
summary { 
  background-color: var(--bgc);
  border: 0;
  border-radius: 5px;
  color: var(--c, inherit);
  list-style-type: none;
  margin: 0.5rem 0;
  outline: none;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  padding-inline-end: 0.5rem;
  padding-inline-start: 1rem;
  user-select: none;
}
summary::marker { display: none; }
summary::-webkit-details-marker { display: none; }

/* 4 States of summary */
button,
summary {
  --bgc: hsl(195, 10%, 90%);
}
[open] > summary {
  --bgc: hsl(195, 10%, 20%);
  --c: hsl(195, 10%, 92%);
}
button:focus,
summary:focus {
  --bgc: hsl(195, 10%, 75%);
}
[open] > summary:focus {
  --bgc: hsl(195, 10%, 10%);
    --c: hsl(195, 10%, 99%);
}
[open] > summary:focus > [data-css-icon*="fill"],
[open] > summary > [data-css-icon*="fill"] {
  --bgc: hsl(195, 10%, 80%);
  --c: hsl(195, 10%, 10%);
}
summary + * {
  color: #777;
  line-height: 1.6;
  padding: 0.5rem;
}

@keyframes dots {
  0% {
    background-color: var(--c);
  }
  50%,
  100% {
    background-color: var(--dots-bgc);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
</style>


</head>

<body translate="no" >
  <details>
  <summary>
    <span data-css-icon="down">Down To Up<i></i></span>
  </summary>
  <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis.
  </div>
</details>

<details>
  <summary>
    <span data-css-icon="plus">Plus To Minus<i></i></span>
  </summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam commodi amet fuga dicta facilis! Sed ipsum unde cumque debitis omnis placeat non, ut magni dolores!
  </div>
</details>

<details>
  <summary>
    <span data-css-icon="right">Right To Down<i></i></span>
  </summary>
  <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit, quam. Ipsum deserunt veniam placeat iusto vel possimus omnis quo dolor distinctio fugit. Ex, impedit est?</div>
</details>

<details>
  <summary>
    <span data-css-icon="cross">Plus to Cross<i></i></span>
  </summary>
  <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam ab animi velit est unde, quod, debitis voluptas, tenetur possimus corporis veritatis commodi eveniet placeat officiis non! Et consequatur nulla molestiae?</div>
</details>

<details>
  <summary>
    <span data-css-icon="equals">Equals to Cross<i></i></span>
  </summary>
  <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam ab animi velit est unde, quod, debitis voluptas, tenetur possimus corporis veritatis commodi eveniet placeat officiis non! Et consequatur nulla molestiae?</div>
</details>

<details>
  <summary>
    <span data-css-icon="down outline">Down To Up: Outline<i></i></span>
  </summary>
  <div>Lor.........完整代码请登录后点击上方下载按钮下载查看