css+js实现三维卡片悬浮视觉差异效果代码-html代码-BFW代码库

css+js实现三维卡片悬浮视觉差异效果代码

代码语言：html

代码描述：css+js实现三维卡片悬浮视觉差异效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap");
        * {
          transform-style: preserve-3d;
        }
        
        html,
        body {
          width: 100%;
          height: 100%;
        }
        
        body {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #444;
          perspective: 440px;
          overflow: hidden;
          background-color: #f4d03f;
          background-image: linear-gradient(15deg, #225522 10%, #447744 45%, #220022 45.1%, #1a001a 90%);
        }
        body::before {
          position: absolute;
          content: "she-hulk";
          height: 100%;
          width: 200%;
          font-size: 300px;
          letter-spacing: -18px;
          color: white;
          font-family: "Roboto", sans-serif;
          text-transform: uppercase;
          font-weight: bold;
          display: flex;
          justify-content: center;
          align-items: center;
          transform: rotate(15deg) translatey(-26px);
          color: #447744;
          filter: blur(1.5px);
        }
        body::after {
          position: absolute;
          content: "";
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background-image: url(//repo.bfw.wiki/bfwrepo/images/huace/pattern.webp);
          background-size: cover;
          background-position: center;
          opacity: 0.05;
          mix-blend-mode: hard-light;
        }
        
        .card {
          position: relative;
          width: 320px;
          height: 540px;
          margin: 4rem;
        }
        @media screen and (max-width: 500px) {
          .card {
            width: 240px;
            height: 405px;
          }
        }
        .card .layer {
          width: 100%;
          height: 100%;
          position: absolute;
          background-repeat: no-repeat;
          background-position: bottom center;
          background-size: contain;
        }
        .card .layer-top {
          transform: translate3d(0, 0, 6px);
          background-image: url(//repo.bfw.wiki/bfwrepo/images/huace/she1.webp);
        }
        .card .layer-middle {
          transform: translate3d(0, 0, 0);
          background-image: url(//repo.bfw.wiki/bfwrepo/images/huace/she2.webp);
        }
        .card .layer-bottom {
          transform: trans.........完整代码请登录后点击上方下载按钮下载查看