css使用has实现手风琴图片悬浮效果代码-html代码-BFW代码库

css使用has实现手风琴图片悬浮效果代码

代码语言：html

所属分类：悬停

代码描述：css使用has实现手风琴图片悬浮效果代码

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

<!DOCTYPE html>

<html lang="en" class="has-support">

<head>

    <meta charset="UTF-8">





    <style>
        * {
          box-sizing: border-box;
        }
        
        body {
          display: grid;
          place-items: center;
          min-height: 100vh;
        }
        
        ul {
          display: flex;
          width: calc(80% - 2rem);
          padding: 0;
          margin: 0;
          list-style-type: none;
        }
        
        li {
          padding: 0;
        }
        
        img {
          max-width: 100%;
          width: 100%;
          -o-object-fit: cover;
             object-fit: cover;
          transition: all 0.2s ease;
        }
        
        ul:is(:hover, :focus-within) img {
          opacity: calc(0.1 + (var(--active-lerp, 0) * 0.9));
          filter: grayscale(calc(1 - var(--active-lerp, 0)));
        }
        
        :root {
          --lerp-0: 1;
          --lerp-1: 0.5787037;
          --lerp-2: 0.2962963;
          --lerp-3: 0.125;
          --lerp-4: 0.037037;
          --lerp-5: 0.0046296;
          --lerp-6: 0;
        }
        
        a {
          outline-offset: 4px;
        }
        
        li {
          flex: calc(0.1 + (var(--active-lerp, 0) * 1));
          transition: flex 0.2s ease;
        }
        
        li:is(:hover, :focus-within) {
          --active-lerp: var(--lerp-0);
          z-index: 7;
        }
        li:has( + li:is(:hover, :focus-within)),
        li:is(:hover, :focus-within) + li {
          --active-lerp: var(--lerp-1);
          z-index: 6;
        }
        li:has( + li + li:is(:hover, :focus-within)),
        li:is(:hover, :focus-within) + li + li {
          --active-lerp: var(--lerp-2);
          z-index: 5;
        }
        li:has( + li + li + li:is(:hover, :focus-within)),
        li:is(:hover, :focus-within) + li + li + li {
          --active-lerp: var(--lerp-3);
          z-index: 4;
        }
        li:has( + li + li + li + li:is(:hover, :focus-within)),
        li:is(:hover, :focus-within) + li + li + li + li {
          --active-lerp: var(--lerp-4);
          z-index: 3;
        }
        li:has( + li + li + li + li + li:is(:hover, :focus-within)),
        li:is(:hover, :focus-within) + li + li + li + li + li {
          --active-lerp: var(--lerp-5);
          z-index: 2;
        }
        li:has( + li + li + li + li + li + li:is(:hover, :focus-within)),
        li:is(:hover, :focus-within) + li + li + li + li + li + li {
          --active-lerp: var(--lerp-6);
          z-index: 1;
        }
    </style>



</head>

<body>
    <ul class="results">
        <li class="result">
            <a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/631ab0ca24a8f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90"
                    width="500" height="500" alt=""></a>
        </li>
        <li class="result">
            <a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/631aaf92a141f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90"
                    width="500" height="500" alt=""></a>
        </li>
        <li class=.........完整代码请登录后点击上方下载按钮下载查看