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