js实现鼠标悬浮不同图片显示不同鼠标图案跟随效果代码-html代码-BFW代码库

js实现鼠标悬浮不同图片显示不同鼠标图案跟随效果代码

代码语言：html

所属分类：搜索

代码描述：js实现鼠标悬浮不同图片显示不同鼠标图案跟随效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">

    <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">



    <style>
        body {
          background-color: rgb(20, 20, 20);
          height: 100vh;    
          margin: 0px;  
          
          display: flex;
          align-items: center;
          justify-content: center;
          gap: clamp(10px, 4vw, 100px);
        }
        
        body:hover > #trailer {
          opacity: 1;
        }
        
        #trailer {
          height: 20px;
          width: 20px;
          background-color: white;
          border-radius: 20px;
          
          position: fixed;
          left: 0px;
          top: 0px;
          z-index: 10000;
          
          pointer-events: none;
          opacity: 0;
          transition: opacity 500ms ease;
          
          display: grid;
          place-items: center;
        }
        
        #trailer:not([data-type=""]) > #trailer-icon {
          opacity: 1;
        }
        
        #trailer-icon {
          font-size: 6px;
          line-height: 4px;
          
          opacity: 0;
          transition: opacity 400ms ease;
        }
        
        .interactable {
          aspect-ratio: 1 / 1.5;
          width: clamp(120px, 40vmin, 600px);
          background-position: center 50%;
          background-size: 100%;  
          opacity: 0.4;
          
          transition: background-size 400ms ease, opacity 400ms ease;
        }
        
        .interactable:hover {
          background-size: 105%;
          opacity: 0.8;
        }
        
        /* -- YouTube Link Styles -- */
        
        body.menu-toggled > .meta-link > span {
          color: rgb(30, 30, 30);
        }
        
        #source-link {
          bottom: 60px;
        }
        
        #source-link > i {
          color: rgb(94, 106, 210);
        }
        
        #yt-link > i {
          color: rgb(239, 83, 80);
        }
        
        .meta-link {
          align-items: center;
          backdrop-filter: blur(3px);
          background-color: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 6px;
          bottom: 10px;
          box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
          cursor: pointer;  
          display: inline-f.........完整代码请登录后点击上方下载按钮下载查看