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;
        }
.........完整代码请登录后点击上方下载按钮下载查看