js+css实现文字字母立体鼠标交互效果代码-html代码-BFW代码库

js+css实现文字字母立体鼠标交互效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现文字字母立体鼠标交互效果代码，鼠标移动，文字字母厚度变化。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Nabla:EDPT,EHLT@30..200,24&display=swap" rel="stylesheet">


    <style>
        * {
          box-sizing: border-box;
        }
        
        body {
          width: 100%;
          height: 100vh;
          background-color: #f7f7fc;
          font-family: "Nabla", cursive;
        }
        body main {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          height: inherit;
        }
        body main h1 {
          display: inline-block;
          text-align: center;
          font-size: 4.5rem;
          font-variation-settings: "EDPT" 80;
          font-palette: --Nabla;
        }
        body main h1 span {
          display: inline-block;
          height: 80px;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
        }
        body .instagram-link {
          position: absolute;
          right: 50px;
          bottom: 50px;
        }
        body .instagram-link i {
          color: #a1a1d0;
          transition: 150ms;
          font-size: 2rem;
        }
        body .instagram-link i:hover {
          color: #7f7fbf;
        }
        
        @font-palette-values --Nabla {
          font-family: Nabla;
          base-palette: 4;
        }
    </style>


</head>

<body>
    <main class="text-container">
        <h1 class="text-1"></h1>
        <h1 class="text-2"></h1>
    </main>

    <a class="instagram-link" href="" target="_top">
        <i class="fa-brands fa-instagram fa-xl"></i>
    </a>


    <script>
        const root = document.querySelector(':root');
        const body = document.body;
        const textContainer = document.querySelector(".text-container");
        const textElement1 = document.query.........完整代码请登录后点击上方下载按钮下载查看