js+css实现多个人物图像堆叠悬浮跳出姓名动画效果代码-html代码-BFW代码库

js+css实现多个人物图像堆叠悬浮跳出姓名动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现多个人物图像堆叠悬浮跳出姓名动画效果代码，可通过tweakpane修改参数实现你想要的效果。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">


  
  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo, masking, debug;

@layer debug {
  [data-animate-bg='true'] .container {
    --bg: linear-gradient(in hsl longer hue 90deg, hsl(10 100% 70%) 0 100%)
      calc(var(--bd) * -1px) 0 / 400% 100%;
    &::before,
    &::after {
      animation: scale-bg infinite linear 8s;
    }
  }

  [data-animate-bg='false'] .container {
    --primary: light-dark(hsl(0 0% 0% / 0.4), hsl(0 0% 90%));
    --bg: linear-gradient(var(--primary) 0 100%);
    --bg: linear-gradient(#0000 0 100%);
  }

  .container {
    height: calc((var(--size) + (var(--size) * 0.5)) * 1px);
    padding-inline: calc(var(--size) * 0.25px);
    border-radius: calc(var(--size) * 2px);
    position: relative;
    --bd: 2;

    &::before,
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      border-radius: calc(var(--size) * 2px);
      background: var(--bg);
    }

    &::before {
      opacity: 0.3;
    }

    &::after {
      border: calc(var(--bd) * 1px) solid #0000;
      mask: linear-gradient(transparent, transparent),
        linear-gradient(white, white);
      mask-clip: padding-box, border-box;
      mask-composite: intersect;
    }
  }

  @keyframes scale-bg {
    to {
      background-position: 400% 0;
    }
  }

  ul.items::after {
    padding-top: 1rem;
    color: color-mix(in hsl, currentColor, #0000 25%);
    text-align: center;
    font-family: monospace;
    font-weight: 200;
    text-transform: uppercase;
    content: 'masked item';
    position: absolute;
    background: blue;
    z-index: -1;
    width: calc(var(--size) * 1px);
    aspect-ratio: 1 / 3;
    outline: 1px solid red;
    background: repeating-linear-gradient(
      45deg,
      hsl(0 100% 50% / 0.5) 0 1px,
      #0000 6px 7px
    );
    bottom: 0%;
    opacity: 0;
    left: calc(var(--column) * 1.5px);
    translate: -50% calc((var(--size) - var(--column)) * 0.5px);
    transition: opacity 0.5s ease-out;
  }
  li:first-of-type {
    position: relative;
  }
  li:first-of-type::after {
    padding-top: 1rem;
    color: color-mix(in hsl, currentColor, #0000 25%);
    text-align: center;
    font-family: monospace;
    font-weight: 200;
    text-transform: uppercase;
    content: 'grid column';
    width: calc(var(--column) * 1px);
    height: calc(var(--size) * 2.5px);
    outline: 1px solid hsl(220 100% 50%);
    background: repeating-linear-gradient(
      45deg,
      hsl(220 100% 50% /.........完整代码请登录后点击上方下载按钮下载查看