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 +.........完整代码请登录后点击上方下载按钮下载查看