css实现人物图像堆叠鼠标悬浮展开动画效果代码-html代码-BFW代码库

css实现人物图像堆叠鼠标悬浮展开动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现人物图像堆叠鼠标悬浮展开动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
        	--color-core-primary: #3740ff;
        	--color-core-tertiary: #6001ff;
        	--color-core-bg: #fff;
        	
        	--color-avatars-background: #f8f9fa;
        }
        
        .avatars {
        	--gap: 0.35em;
        	--avatar-size: 5em;
        	--overlap-size: 2em;
        	--non-overlap-size: 4em; /* Best to keep lower than --avatar-size */
        	--border-size: 0.4em;
        	--num-children: 4; /* Value is automatically updated based on the number of children. See :has() below. Does not work in Firefox though. */
        	--num-children-1: calc(var(--num-children) - 1);
        
        	background: var(--color-avatars-background);
        	border-radius: var(--avatar-size);
        	
        	display: grid;
        	gap: var(--gap);
        	padding: var(--gap);
        	
        	
        	grid-auto-flow: column;
        	grid-template-columns: repeat(var(--num-children), var(--grid-size-to-use));
        /* 	grid-auto-columns: var(--grid-size-to-use); */
        	width: calc(var(--grid-size-to-use) * var(--num-children-1) + var(--gap) * var(--num-children) + var(--avatar-size) + var(--border-size));
        	transition: all ease-in-out 0.25s;
        
        	border: calc(var(--border-size) / 2) solid rgb(0 0 0 / 0.3);
        }
        
        .avatars {
        	--grid-size-to-use: var(--overlap-size);
        }
        
        
        :is( /* Wrapped in an :is() to not break Firefox which does not support :has() */
          .avatars:hover,
          .avatars:not(hover):has(> :focus) /* Also grow when tabbing into the list */
        ) {
        	--grid-size-to-use: var(--non-overlap-size, var(--avatar-size));
        }
        
        .avatars > * {
        	width: var(--avatar-size);
        	aspect-ratio: 1;
        	height: auto;
        	
        	clip-path: circle(calc(var(--avatar-size) / 2 + var(--border-size) * 2));
        	outline: none;
        }
        
        .avatars img {
        	width: 100%;
        	height: auto;
        	
        	--border-color: var(--color-core-primary);
        	outline: var(--border-size) solid var(--border-color);
        	outline-offset: calc(var(--border-size) * -2 + 1px); /* 1px extra to cater for rounding errors */
        	
        	border: var(--border-size) solid var(--color-avatars-background);
        	border-radius: var(--avatar-size);
        	
        	transition: all ease-in-out 0.15s;
        }
        
        .avatars :is(:hover, :focus) > img {
        	--border-color: var(--color-core-tertiary);
        	scale: 1.1;
        }
        
        /* Update --num-children based on the number of children .avatars has */
        .avatars:where(:has(> *:nth-of-type(1):last-child)) {
        	--num-children: 1;
        }
        .avatars:where(:has(> *:nth-of-type(2):last-child)) {
        	--num-children: 2;
        }
        .avatars:where(:has(> *:nth-of-type(3):last-child)) {
        	--num-children: 3;
        }
   .........完整代码请登录后点击上方下载按钮下载查看