div+css实现卡片鼠标悬浮展开动画效果代码-html代码-BFW代码库

div+css实现卡片鼠标悬浮展开动画效果代码

代码语言：html

所属分类：悬停

代码描述：div+css实现卡片鼠标悬浮展开动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>
     @import url(https://fonts.bunny.net/css?family=bungee-hairline:400|bungee-inline:400);
@layer base, fireworks, cards;

@layer cards {
  :root{
    --card-trans-duration: 2500ms;
    --card-trans-easing:linear(0, 0.011 0.6%, 0.042 1.2%, 0.181 2.6%, 0.899 7.2%, 1.144 9.1%, 1.292 10.9%, 1.333 11.8%, 1.353 12.7%, 1.355 13.4%, 1.346 14.1%, 1.298 15.6%, 1.028 20.5%, 0.943 22.4%, 0.895 24.1%, 0.875 25.8%, 0.875 27%, 0.888 28.3%, 1.012 35%, 1.034 36.9%, 1.044 38.9%, 1.04 41.4%, 0.996 48.1%, 0.984 51.9%, 1.006 64.9%, 0.998 77.8%, 1);
    
    --card-text-color: white;
		--card-bg-color: linear-gradient(rgb(0, 132, 209),rgb(5, 47, 74));
		--card-border: 1px solid rgb(255 255 255 / .75);
    --card-distance: 45px;
    --card-angle: 7deg;
    --card-radius: 20px;
    --reveal-delay-factor: 150ms;
  }
  body{
		background: radial-gradient(in oklch, rgb(0, 146, 184), rgb(2, 74, 112));
     font-family: 'Bungee Hairline', display;
  }
	
  .cards {
    position: relative;
    width: min(70vw,300px);
    aspect-ratio: 5 / 7;
    z-index: 1;
    
		.card {
			--cards: sibling-count();
      --card-i: sibling-index();
      @supports not (order:sibling-index()) {
				 --cards: 5;
        &:nth-child(1){ --card-i: 0;}
        &:nth-child(2){ --card-i: 1;}
        &:nth-child(3){ --card-i: 2;}
        &:nth-child(4){ --card-i: 3;}
        &:nth-child(5){ --card-i: 4;}
      }
      --card-half: calc(var(--cards)  / 2);
      --card-offset-x: calc(var(--card-i) - var(--card-half));
      --card-offset-y: calc(var(--card-i) - var(--card-half));
      --card-rotate: 0deg;
      --card-translate-x: 0;
      --card-translate-y: 0;

  .........完整代码请登录后点击上方下载按钮下载查看