css实现图文卡片堆叠关闭位置更换效果代码-html代码-BFW代码库

css实现图文卡片堆叠关闭位置更换效果代码

代码语言：html

所属分类：其他

代码描述：css实现图文卡片堆叠关闭位置更换效果代码

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

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

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

  
  
<style>
@layer base, utilities,demo;
@import url(https://fonts.bunny.net/css?family=kodchasan:200,400,600) layer(demo);

@layer demo {
	section{
			/* defaults */
			--_offset-steps: 6rem; /* distance up */
			--_scale-steps: 25;  /* scale behind*/
			--_opacity-steps: 15; /* opacity behind */

			--_ani-duration: 300ms; /* transition on card elements */
			--_ani-delay: 200ms; /* delay on card elements (will be multiplied) */

			/* calculations */
			--_offset-steps-two: calc(var(--_offset-steps) * -1);
			--_offset-steps-three: calc(var(--_offset-steps) * -2);

			--scale-steps-two: calc(1 - var(--_scale-steps) * 0.01);
			--scale-steps-three: calc(1 - var(--_scale-steps) * 0.02);

			--opacity-steps-two: calc(1 - var(--_opacity-steps) * 0.02);
			--opacity-steps-three: calc(1 - var(--_opacity-steps) * 0.04);
		
		@media (width > 600px){
			--_offset-steps: 4em; /* distance up */
		}

			display: grid;
			grid-template-areas: "stack";
			color: black;
			width: min(calc(100% - 2rem), 40rem);
	}

	article{
			--_bg-alpha: .5;
.........完整代码请登录后点击上方下载按钮下载查看