css实现融合式折叠文字卡片点击堆叠切换效果代码-html代码-BFW代码库

css实现融合式折叠文字卡片点击堆叠切换效果代码

代码语言：html

所属分类：其他

代码描述：css实现融合式折叠文字卡片点击堆叠切换效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
:root {
	--green:#37c4b1;
	--cyan:#25aad8;
	--blue:#4092e3;
	--purple:#7d54c1;
	--pink:#c776a3;
	--orange:#e87;
	--deep-purple:#281c4c;
	--duration:.7s;
	--ease:cubic-bezier(0.6,0,0.2,1);
	--transition:transform var(--duration) var(--ease)
}
*,*:before,*:after {
	box-sizing:border-box;
	position:relative
}
html,body {
	height:100%;
	width:100%;
	margin:0;
	padding:0
}
body {
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:var(--deep-purple);
	overflow:hidden
}
.goo-filter {
	position:absolute;
	visibility:hidden
}
#app {
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:1fr;
	height:90vmin;
	width:55vmin
}
#app>section {
	margin:5vmin 8vmin;
	grid-area:1/1
}
section {
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:1fr;
	transform-style:preserve-3d;
	perspective:800px;
	will-change:transform
}
section>* {
	flex:0 0 100%;
	grid-area:1/1
}
.backgrounds {
	filter:url("#goo");
	pointer-events:none
}
.background {
	will-change:transform;
	border-radius:2vmin;
	background-image:linear-gradient(to bottom,var(--primary,blue),var(--secondary,pink))
}
.background::before {
	content:"";
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	z-index:3;
	background-image:linear-gradient(to bottom,#4b3777,#331847);
	opacity:.8;
	transition:inherit;
	transition-property:opacity
}
.background[data-active]::before {
	opacity:.01
}
article {
	display:flex;
	flex-direction:column
}
.background,article {
	will-change:transform;
	transition:var(--transition);
	transition-property:transform,transform-origin,z-index;
	padding:5vmin;
	color:white;
	transform-origin:right center;
	transform:translateX(-90%) translateZ(-25vmin) rotateY(40deg)
}
.background[data-active],article[data-active] {
	transform-origin:center center;
	transform:translateX(0) translateZ(0) rotateY(0deg);
	z-index:3
}
.background[data-active] ~ *,article[data-active] ~ * {
	z-index:-1;
	transform-origin:left center;
	transform:translateX(140%) translateZ(-25vmin) rotateY(-40deg)
}
.background[data-active]+*,article[data-active]+* {
	z-index:1;
	transform:translateX(90%) translateZ(-25vmin) rotateY(-40deg)
}
article {
	opacity:0;
	transition-property:transform,transform-origin,opacity,z-index
}
article[data-active] {
	opacity:1
}
h1 {
	font-size:4vmin;
	line-height:1.2
}
p {
	font-size:2.5vmin;
	line-height:1.4;
	color:rgba(255,255,255,0.6)
}

    </style>
</head>

<body><svg class="goo-filter" viewBox="0 0 1 1"><filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 50 -20" result="goo" /><!-- <feBlend in="SourceGraphic" in2="goo" />--></fi.........完整代码请登录后点击上方下载按钮下载查看