css+js实现手风琴折叠图片文字标题效果代码
代码语言：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 + li,
/* The tail end */
li:has(+ li + li + li + li:nth-of-type(24) :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:nth-of-type(23) :checked),
li:has(+ li + li + li + li + li:nth-of-type(23) :checked),
li:has(+ li + li + li + li:nth-of-type(22) :checked)
{
--content: 1;
--width: calc(var(--container-width) * (var(--size-2) + (var(--hover, 0) * (var(--size-2) * 1.5))));
width: var(--width);
z-index: 2;
translate: 0 0;
}
/* Theming stuff goes down here */
label {
display: block;
height: 100%;
width: 100%;
}
[type=radio] {
/* display: none;*/
}
li:hover {
--hover: 1;
}
.slide__wrapper {
display: block;
position: relative;
height: 100%;
width: 100%;
transition: background var(--transition) ease;
background:
radial-gradient(circle at center, hsl(var(--brand-hue, 210) 80% 70% / calc(var(--active, 0) * 0.75)), transparent 75%),
hsl(0 0% calc((66 + (var(--active, 0) * 12)) * 1%));
}
.speaker {
position: absolute;
inset: 0;
}
.speaker__info {
position: absolute;
left: 1.5rem;
top: 1.5rem;
display: grid;
gap: 0.5rem;
width: var(--size-1);
max-width: calc(var(--size-1) - 3rem);
opacity: var(--active, 0);
transition: opacity var(--transition) ease-out;
}
.speaker__image:after {
content: "";
position: absolute;
inset: 0;
transition: opacity var(--transition) ease;
opacity: var(--active, 0);
background: radial-gradient(circle at 35% 0%, hsl(0 0% 100% / 0.65) 25%, hsl(var(--brand-hue) 80% 80% / 0.35) 50% 75%, hsl(0 0% 100% / 0.25));
}
/*.speaker__info > * {
white-space: nowrap;
}*/
.speaker__title {
text-transform: uppercase;
font-weight: bold;
color: hsl(var(--brand-hue) 80% 70%);
background: linear-gradient(65deg, hsl(var(--brand-hue) 80% 80%), hsl(var(--brand-hue) 80% 70%));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 0.875rem;
font-family: sans-serif;
}
.speaker__name {
font-size: 1.75rem;
font-family: sans-serif;
}
li:has(:checked) .slide__content {
width: 100%;
}
img {
position: absolute;
bottom: 0;
left: 50%;
translate: -50% 0%;
height: var(--size-1);
width: var(--size-1);
scale: calc(1 + (var(--active, 0) * 0.25));
transform-origin: 50% 25%;
-o-object-fit: cover;
object-fit: cover;
transition: filter var(--transition) ease, width var(--transition) ease, scale var(--transition) ease;
filter: grayscale(calc(2 - var(--active, 0)))
}
.slide__content {
transition: width var(--transition) ease;
opacity: var(--content, 0);
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: var(--size-1);
display: grid;
place-items: center;
transform: translate(-50%, -50%);
transition: opacity var(--transition) ease;
}
ul {
display: none;
}
</style>
</head>
<body >
<ul>
<li>
<span class="speaker__details sr-only"></span>
<label aria-hidden="true" for="speaker--1">
<input type="radio" aria-hidden="true" name="speakers" id="speaker--1">
<span class="slide__wrapper">
<span class="slide__content">
<span class="speaker">
<span class="speaker__image">
<img src="./andrea-piacquadio.png" alt="" width="720" height="720" />
</span>
<span class="speaker__info">
<span class="speaker__title">President, Product and Business, Stripe</span>
<span class="speaker__name">Joe Bloggs</span>
</span>
</span>
</span>
</span>
</label>
</li>
<li>
<span class="speaker__details sr-only"></span>
<label aria-hidden="true" for="speaker--2">
<input type="radio" aria-hidden="true" name="speakers" id="speaker--2">
<span class="slide__wrapper">
<span class="slide__content">
<span class="speaker">
<span class="speaker__image">
<img src="./andrea-piacquadio.png" alt="" width="720" height="720" />
</span>
<span class="speaker__info">
<span class="speaker__title">President, Product and Business, Stripe</span>
<span class="speaker__name">Joe Bloggs</span>
</span>
</span>
</span>
</span>
</label>
</li>
<li>
<span class="speaker__details sr-only"></span>
<label aria-hidden="true" for="speaker--3">
<input type="radio" aria-hidden="true" name="speakers" id="speaker--3">
<span class="slide__wrapper">
<span class="slide__content">
<span class="speaker">
<span class="speaker__image">
<img src="./andrea-piacquadio.png" alt="" width="720" height="720" />
</span>
<span class="speaker__info">
<span class="speaker__title">President, Product and Business, Stripe</span>
<span class="speaker__name">Joe Bloggs</span>
</span>
</span>
</span>
</span>
</label>
</li>
<li>
<span class="speaker__details sr-only"></span>
<label aria-hidden="true" for="speaker--4">
<input type="radio" aria-hidden="true" name="speakers" id="speaker--4">
<span class="slide__wrapper">
<span class="slide__content">
<span class="speaker">
<span class="speaker__image">
<img src="./andrea-piacquadio.png" alt="" width="720" height="720" />
</span>
<span class="speaker__info">
<span class="speaker__title">President, Product and Business, Stripe</span>
<span class="speaker__name">Joe Bloggs</span>
</span>
</span>
</span>
</span>
</label>
</li>
<li>
<span class="speaker__details sr-only"></span>
<label aria-hidden="true" for="speaker--5">
<input type="radio" aria-hidden="true" name="speakers" id="speaker--5">
<span class="slide__wrapper">
<span class="slide__content">
<span class="speaker">
<span class="speaker__image">
<img src="./andrea-piacquadio.png" alt="" width="720" height="720" />
</span>
<span class="speaker__info">
<span class="speaker__title">President, Product and Business, Stripe</span>
<span class="speaker__name">Joe Bloggs</span>
</span>
</span>
</span>
</span>
</label>
</li>
<li>
<span class="speaker__details sr-only"></span>
<label aria-hidden="true" for="speaker--6">
<input type="radio" aria-hidden="true" name="speakers" id="speaker--6">
<span class="slide__wrapper">
<span class="slide__content">
<span class="speaker">
<span class="speaker__image">
<img src="./andrea-piacquadio.png" alt="" width="720" height="720" />
</span>
<span class="speaker__info">
<span class="speaker__title">President, Product and Business, Stripe</span>
<span class="speaker__name">Joe Bloggs</span>
</span>
</span>
</span>
</span>
</label>
</li>
<li>
<span class="speaker__details sr-only"></span>
<label aria-hidden="true" for="speaker--7">
<input type="radio" aria-hidden="true" name="speakers" id="speaker--7">
<span class="slide__wrapper">
<span class="slide__content">
<span class="speaker">
<span class="speaker__image">
<img src="./andrea-piacquadio.png" alt="" width="720" height="720" />
</span>
<span class="speaker__info">
<span class="speaker__title">President, Product and Business, Stripe</span>
<span class="speaker__name">Joe Bloggs</span>
</span>
</span>
</span>
</span>
</label>
</li>
<li>
<span class="speaker__details sr-only"></span>
<label aria-hidden="true" for="speaker--8">
<input type="radio" aria-hidden="true" name="speakers" id="speaker--8">
<span class="slide__wrapper">
<span class="slide__content">
<span class="speaker">
<span class="speaker__image">
<img src="./andrea-piacquadio.png" alt="" width="720" height="720" />
</span>
<span class="speaker__info">
<span class="speaker__title">President, Product and Business, Stripe</span>
<span class="speaker__name">Joe Bloggs</span>
</span>
</span>
</span>
</span>
</label>
</li>
<li>
<span class="speaker__details sr-only"></span>
<label aria-hidden="true" for="speaker--9">
<input type="radio" aria-hidden=&qu.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0