css+js实现手风琴折叠图片文字标题效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：css+js实现手风琴折叠图片文字标题效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">
  

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
  
  
<style>


*,
*:after,
*:before {
	box-sizing: border-box;
}

:root {
	--transition: 0.5s;
	--container-width: clamp(300px, 80vw, 960px);
	--brand-hue: 230;
	--size-1: calc(var(--container-width) * 0.48);
	--size-2: 0.10;
	--size-3: calc(var(--container-width) * 0.04);
}

body {
	padding: 4rem 0;
	display: grid;
	place-items: center;
	min-height: 100vh;
	font-family:  'Google Sans', sans-serif, system-ui;
}

ul {
	aspect-ratio: 16 / 9;
	width: var(--container-width);
	overflow: hidden;
	display: flex;
	gap: 0.5rem;
	padding: 0;
/*	padding-left: 0.5rem;*/
	margin: 0;
	position: relative;
	list-style-type: none;
	display: flex;
	justify-content: center;
/*	border-radius: 1rem;*/
}

label {
	cursor: pointer;
}

.sr-only, [type=radio] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

li {
	border-radius: 1rem;
	transition: all var(--transition) ease;
	position: relative;
	-webkit-clip-path: inset( 0 0 0 0);
	        clip-path: inset( 0 0 0 0);
	z-index: 1;
	overflow: hidden;
	width: 0;
	position: absolute;
	flex-shrink: 1;
}


/* Set the display */
/*li:has(+ li + li + li + li + li :checked),*/
li:has(+ li + li + li + li :checked),
li:has(+ li + li + li :checked),
li:has(+ li + li :checked),
li:has(+ li :checked),
li:has(:checked),
li:has(:checked) + li,
li:has(:checked) + li + li,
li:has(:checked) + li + li + li,
li:has(:checked) + li + li + li + li {
/*li:has(:checked) + li + li + li + li + li {*/
	width: var(--size-3);
	position: static;
}

li:has(:checked) {
	--active: 1;
	--content: 1;
	--width: var(--size-1);
	width: var(--width);
	z-index: 3;
	flex: 1 0 var(--size-1);
}

/* Edge cases for when some elements should be visible */
li:nth-of-type(1):has(:checked) + li + li + li + li,
li:nth-of-type(1):has(:checked) + li + li + li + li + li,
li:nth-of-type(1):has(:checked) + li + li + li + li + li + li,
/* Plus one for the outsider and translater? */
li:nth-of-type(1):has(:checked) + li + li + li + li + li + li + li,
li:nth-of-type(1):has(:checked) + li + li + li + li + li + li + li + li,
/* Now for the others... */
li:nth-of-type(2):has(:checked) + li + li + li + li,
li:nth-of-type(2):has(:checked) + li + li + li + li + li,
li:nth-of-type(2):has(:checked) + li + li + li + li + li + li,
li:nth-of-type(2):has(:checked) + li + li + li + li + li + li + li,
/*li:nth-of-type(2):has(:checked) + li + li + li + li + li + li + li + li,*/
li:nth-of-type(3):has(:checked) + li + li + li + li + li,
li:nth-of-type(3):has(:checked) + li + li + li + li + li + li,
/*li:nth-of-type(3):has(:checked) + li + li + li + li + li + li + li,*/
li:nth-of-type(4):has(:checked) + li + li + li + li + li,
/* If the last item is checked */
li:has(+ li + li + li + li + li:nth-of-type(24) :checked),
li:has(+ li + li + li + li + li + li:nth-of-type(24) :checked),
li:has(+ li + li + li + li + li + li + li:nth-of-type(24) :checked),
li:has(+ li + li + li + li + li + li + li + li:nth-of-type(24) :checked),
li:has(+ li + li + li + li + li:nth-of-type(23) :checked),
li:has(+ li + li + li + li + li + li:nth-of-type(23) :checked),
li:has(+ li + li + li + li + li + li + li:nth-of-type(23) :checked),
li:has(+ li + li + li + li + li:nth-of-type(22) :checked),
li:has(+ li + li + li + li + li + li:nth-of-type(22) :checked),
li:has(+ li + li + li + li + li:nth-of-type(21) :checked) {
	width: var(--size-3);
	position: static;
}

/* Translate out the first/last outer elements */
li:first-of-type:has(:checked) ~ li:nth-of-type(24),
li:first-of-type:has(~ li:nth-of-type(24) :checked),
/*li:has(+ li + li + li + li + li :checked),*/
li:has(+ li + li + li + li + li:not(:nth-of-type(24)):not(:nth-of-type(23)):not(:nth-of-type(22)):not(:nth-of-type(21)) :checked),
li:not(:nth-of-type(1)):not(:nth-of-type(2)):not(:nth-of-type(3)):not(:nth-of-type(4)):not(:nth-of-type(24)):not(:nth-of-type(23)):not(:nth-of-type(22)):has(:checked) + li + li + li + li + li {
	width: 0;
	position: static;
}
li:not(:nth-of-type(1)):not(:nth-of-type(2)):not(:nth-of-type(3)):not(:nth-of-type(4)):has(+ li + li + li + li + li:not(:nth-of-type(24)):not(:nth-of-type(23)):not(:nth-of-type(22)):not(:nth-of-type(21)) :checked) {
	translate: -100% 0;
}
li:not(:nth-of-type(1)):not(:nth-of-type(2)):not(:nth-of-type(3)):not(:nth-of-type(4)):has(:checked) + li + li + li + li + li {
	translate: 100% 0;
}

/* Do this but move the first and last ones out with a translation :D */


/* What about the ones that come before it being last */
/* Grow the 4th back if checked is last? */
/*li:has(+ li + li + li + li :checked):has(~ li:nth-of-type(24) :checked ),
li:has(+ li + li + li + li + li :checked):has(~ li:nth-of-type(24) :checked ),
li:has(+ li + li + li + li + li + li :checked):has(~ li:nth-of-type(24) :checked ),*/
li:has(+ li :checked),
li:has(+ li + li :checked),
li:has(+ li + li + li :checked),
li:has(:checked) + li,
li:has(:checked) + li + li,
li:has(:checked) + li + li + li,
/* Edge cases such as one of the first 3 has a checked */
li:nth-of-type(1):has(:checked) + li + li + li + li,
li:nth-of-type(1):has(:checked) + li + li + li + li + li,
li:nth-of-type(1):has(:checked) + li + li + li + li + li + li,
li:nth-of-type(2):has(:checked) + li + li + li + li,
li:nth-of-type(2):has(:checked) + li + li + li + li + li,
li:nth-of-type(3):has(:checked) + li + li + li +.........完整代码请登录后点击上方下载按钮下载查看