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;
			--_border-radius: 10px;
			--_bg-dot-offset: 20px;
			--_bg-dot-color: var(--_bg-clr);
	
			position: relative;
			isolation: isolate;
			background-color: white;
			grid-area:stack;
			/*overflow: clip;*/
			transition: 500ms ease-in-out;
			border-radius: var(--_border-radius);

			translate: 0 var(--_offset);
			order: var(--_order);
		z-index: var(--_order);
			scale: var(--_scale);
			opacity: var(--_opacity);
			font-family: "Kodchasan", sans-serif;
			
			&::before,
			&::after{
				content: "";
				position: absolute;
				border-radius: inherit;
				z-index: -1;
			}
			&::before {
				z-index: -1;
				inset: calc(var(--_bg-dot-offset) * -1);
				background-image: radial-gradient(var(--_bg-dot-color) 1px, transparent 0px);
				backgro.........完整代码请登录后点击上方下载按钮下载查看