js实现鼠标悬浮卡片上移动视觉差异效果代码-html代码-BFW代码库

js实现鼠标悬浮卡片上移动视觉差异效果代码

代码语言：html

代码描述：js实现鼠标悬浮卡片上移动视觉差异效果代码

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

<html>

<head>
    <style>
        *,
        *::after,
        *::before {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        html {
          font-size: 62.5%;
        }
        
        body {
          --background-color: #a1f9f1;
        
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        
          min-height: 100vh;
          padding: 2rem;
        
          color: hsla(0, 0%, 0%, .6);
          background: var(--background-color);
          text-align: center;
        }
        
        h1 {
          font-size: 3.2rem;
          padding-top: 2rem;
        }
        
        h1+p {
          font-size: 1.8rem;
          padding: 2rem 0 3rem;
        }
        
        .main {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
        }
        
        .wrap {
          margin: 2rem;
        
          transform-style: preserve-3d;
          transform: perspective(100rem);
        
          cursor: pointer;
        }
        
        .container {
          --rX: 0;
          --rY: 0;
          --bX: 50%;
          --bY: 80%;
        
          width: 30rem;
          height: 36rem;
          border: 1px solid var(--background-color);
          border-radius: 1.6rem;
          padding: 4rem;
        
          display: flex;
          align-items: flex-end;
        
          position: relative;
          transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
        
          background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("//repo.bfw.wiki/bfwrepo/image/6162212ca4c18.png");
          background-position: var(--bX) var(--bY);
          background-size: 40rem auto;
          box-shadow: 0 0 3rem .5rem hsla(0, 0%, 0%, .2);
        
          transition: transform .6s 1s;
        }
        
        .container::before,
        .container::after {
          content: "";
        
          width: 2rem;
          height: 2rem;
          border: 1px solid #fff;
        
          position: absolute;
          z-index: 2;
        
          opacity: .3;
          transition: .3s;
        }
        
        .container::before {
          top: 2rem;
          right: 2rem;
        
          border-bottom-width: 0;
          border-left-width: 0;
        }
        
        .container::after {
        .........完整代码请登录后点击上方下载按钮下载查看