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