js实现可配置文字导航条鼠标悬停伸缩动画效果代码-html代码-BFW代码库

js实现可配置文字导航条鼠标悬停伸缩动画效果代码

代码语言：html

代码描述：js实现可配置文字导航条鼠标悬停伸缩动画效果代码

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

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

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

  
  
<style>
@import url('//repo.bfw.wiki/bfwrepo/css/normalize.css"') layer(normalize);

@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@layer normalize, base, demo;

@layer demo {
  .arrow {
    display: inline-block;
    opacity: 0.6;
    position: fixed;
    font-size: 0.875rem;
    font-family: 'Gloria Hallelujah', cursive;
    transition: opacity 0.26s 0.26s ease-out;

    &.arrow--instruction {
      top: 50%;
      left: 50%;
      translate: -140% 150%;
      rotate: -10deg;
      svg {
        /* color: hsl(0 0% 65%); */
        scale: 1 1;
        top: 40%;
        rotate: 10deg;
        left: 90%;
        width: 90px;
        translate: 0% 20%;
        position: absolute;
      }
    }
  }

  .hover {
    border: 0;
    background: transparent;
    position: relative;
    color: var(--color);
    padding: 1rem 2rem;
    background: var(--bg);
    cursor: pointer;
    outline-color: canvasText;
    border-radius: 0;

    &::after {
      content: '';
      background: white;
      position: absolute;
      inset: 0;
      mix-blend-mode: difference;
      scale: 0 1;
      transform-origin: 100% 50%;
      transition: scale 0.2s ease-out;
      pointer-events: none;
    }
  }

  .hover:is(:hover, :focus-visible)::after {
    scale: 1 1;
    transform-origin: 0.........完整代码请登录后点击上方下载按钮下载查看