css+js实现网格鼠标移动边框聚焦光线跟踪效果代码-html代码-BFW代码库

css+js实现网格鼠标移动边框聚焦光线跟踪效果代码

代码语言：html

所属分类：悬停

代码描述：css+js实现网格鼠标移动边框聚焦光线跟踪效果代码

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

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>
        * {
      box-sizing: border-box;
    }
    
    body {
      display: grid;
      place-items: center;
      min-height: 100vh;
      background: hsl(0 0% 6%);
    }
    
    ul {
      padding: 0;
      margin: 0;
      list-style-type: none;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      width: 100%;
    }
    
    main {
      width: 80ch;
      max-width: 100%;
    }
    
    .card {
      background: hsl(0 0% 10%);
      width: 200px;
      aspect-ratio: 4 / 3;
      position: relative;
      transition: background 0.1s;
    }
    
    .card:hover {
      --active: 1;
    }
    
    .card:after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at calc(var(--x) * 1px) calc(var(--y) * 1px), hsl(0 0% 100% / 0.15), transparent 15vmin);
      background-attachment: fixed;
      opacity: var(--active, 0);
      transition: opacity 0.2s;
      pointer-events: none;
    }
    
    .card:before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at calc(var(--x) * 1px) calc(var(--y) * 1px), hsl(0 0% 100% / 0.5), transparent 15vmin),
        transparent;
      background-attachment: fixed;
      pointer-events: none;
      -webkit-mask:
        linear-gradient(white, white) 50% 0 / 100% 4px no-repeat,
        linear-gradient(white, white) 50% 100% / 100% 4px no-repeat,
        linear-gradient(white, white) 0 50% / 4px 100% no-repeat,
        linear-gradient(white, white) 100% 50% / 4px 100% no-repeat;
              mask:
        linear-g.........完整代码请登录后点击上方下载按钮下载查看