css+js实现文字导航菜单悬浮动画效果代码-html代码-BFW代码库

css+js实现文字导航菜单悬浮动画效果代码

代码语言：html

所属分类：悬停

代码描述：css+js实现文字导航菜单悬浮动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @font-face {
          src: url("//repo.bfw.wiki/bfwrepo/font/MonumentExtended-Regular.otf") format("opentype");
          font-family: "Monument";
          font-weight: normal;
        }
        *,
        *:before,
        *:after {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        :root {
          --cursorX: 0;
          --cursorY: 0;
          --cursorScale: 1;
        }
        
        html {
          font-size: calc(100vw / 1920 * 10);
        }
        
        body {
          min-height: 100vh;
          display: grid;
          place-items: center;
          font-family: "Monument";
          font-size: 16px;
          font-weight: 400;
          background-color: white;
        }
        
        #cursor {
          --size: 2rem;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 9;
          height: var(--size);
          width: var(--size);
          background-color: #000;
          mix-blend-mode: difference;
          border-radius: 50%;
          transform: translate3d(calc(100vw * var(--cursor-x) - var(--size) / 2), calc(100vh * var(--cursor-y) - var(--size) / 2), 0) scale(var(--cursor-scale));
          pointer-events: none;
        }
        
        .title {
          display: block;
          overflow: hidden;
          cursor: pointer;
        }
        .title:hover .title__text {
          transform: translateY(-100%);
        }
        .title:hover .title__text::after {
          transform: translateY(100%) skewY(0deg);
        }
        .title__text {
          display: inline-block;
          position: relative;
          font-size: 8rem;
          line-height: 1.6;
          transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
          color: black;
        }
        .title__text::after {
          content: attr(data-text);
          font-size: 8rem;
          color: black;
          position: absolute;
          bottom: 0;
          left: 0;
          transform: translateY(100%) skewY(8deg);
          transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
        }
    </style>

</head>

<body>
    <div id="cursor"></div>

    <div class="items">
        <div class="title">.........完整代码请登录后点击上方下载按钮下载查看