二十多种折叠选项卡打开关闭效果代码-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].........完整代码请登录后点击上方下载按钮下载查看