js实现一个悬浮卡片点击飞出小人效果代码-html代码-BFW代码库

代码语言：html
所属分类：悬停
代码描述：js实现一个悬浮卡片点击飞出小人效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">



    <style>
        @keyframes reappear {
          from {
            top: 0px;
          }
          to {
            top: -50px;
          }
        }
        html,
        body {
          background-color: #1e1e1e;
          height: 100vh;
          margin: 0px;
          padding: 0px;
          width: 100vw;
        }
        
        .roboto-mono {
          font-family: "Roboto Mono", monospace;
        }
        
        body {
          align-items: center;
          display: flex;
          justify-content: center;
          overflow: hidden;
        }
        body .background-image {
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }
        body #card-display-background {
          background-image: url("");
          height: 100%;
          left: 50%;
          max-width: 1800px;
          opacity: 0.25;
          position: absolute;
          transform: translateX(-50%);
          width: 100%;
        }
        body #card-display-background:after, body #card-display-background:before {
          content: "";
          height: inherit;
          left: 0px;
          position: absolute;
          top: 0px;
          width: inherit;
          z-index: 1;
        }
        body #card-display-background:after {
          background: linear-gradient(to top, #1e1e1e, transparent, #1e1e1e);
        }
        body #card-display-background:before {
          background: linear-gradient(to right, #1e1e1e 5%, transparent 20%, transparent 80%, #1e1e1e 95%);
        }
        body #card-display-wrapper {
          position: relative;
          transition: transform 250ms;
          z-index: 2;
        }
        body #card-display-wrapper #card-display {
          display: flex;
          gap: 20px;
          position: relative;
          z-index: 2;
        }
        body #card-display-wrapper #card-display.transition {
          transition: transform 500ms;
        }
        body #card-display-wrapper #card-display .card-wrapper {
          background-color: transparent;
          border: none;
          border-radius: 15px;
          outline: none;
          padding: 0px;
          position: relative;
          transition: transform 250ms;
        }
        body #card-display-wrapper #card-display .card-wrapper:first-of-type {
          transform: scale(0.85);
        }
        body #card-display-wrapper #card-display .card-wrapper:first-of-type .card {
          background-color: #ef5350;
        }
        body #card-display-wrapper #card-display .card-wrapper:nth-of-type(2) {
          transform: scale(0.95);
        }
        body #card-display-wrapper #card-display .card-wrapper:last-of-type {
          transform: scale(0.85);
        }
        body #card-display-wrapper #card-display .card-wrapper:last-of-type .card {
          background-color: #29b6f6;
        }
        body #card-display-wrapper #card-display .card-wrapper:hover {
          transform: scale(1);
        }
        body #card-display-wrapper #card-display .card-wrapper:hover .card .card-svgs .svg-left {
          transform: translate(-30%, -30%);
        }
        body #card-display-wrapper #card-display .card-wrapper:hover .card .card-svgs .svg-right {
          transform: translate(30%, -30%);
        }
        body #card-display-wrapper #card-display .card-wrapper:hover .card .card-icon {
          transform: translate(-20px, 20%) scale(1.2) rotate(-10deg);
        }
        body #card-display-wrapper #card-display .card-wrapper:hover .card-chef {
          opacity: 1;
          top: -50px;
        }
        body #card-display-wrapper #card-display .card-wrapper:active {
          transform: scale(0.95);
        }
        body #card-display-wrapper #card-display .card-wrapper:active .card .card-svgs .svg-left {
          transform: translate(-30%, -30%) scale(1.2);
        }
        body #card-display-wrapper #card-display .card-wrapper:active .card .card-svgs .svg-right {
          transform: translate(30%, -30%) scale(1.2);
        }
        body #card-display-wrapper #card-display .card-wrapper:active .card .card-icon {
          transform: translate(-20px, 20%) scale(1.4) rotate(-10deg);
        }
        body #card-display-wrapper #card-display .card-wrapper.selected .card-chef {
          opacity: 0;
          top: -500px;
          transition: opacity 500ms, top 500ms;
        }
        body #card-display-wrapper #card-display .card-wrapper.chef-reappear .card-chef {
          animation: reappear 250ms ease-in;
        }
        body #card-display-wrapper #card-display .card-wrapper:not(.chef-reappear, .selected):active .card-chef {
          top: -20px;
        }
        body #card-display-wrapper #card-display .card-wrapper .card {
          background-color: #141414;
          border-radius: inherit;
          box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.3);
          cursor: pointer;
          height: 300px;
          position: relative;
          width: 485px;
          z-index: 2;
        }
        body #card-display-wrapper #card-display .card-wrapper .card .card-svgs {
          border-radius: inherit;
          height: 100%;
          left: 0px;
          overflow: hidden;
          position: absolute;
          top: 0px;
          width: 100%;
          z-index: 2;
        }
        body #card-display-wrapper #card-display .card-wrapper .card .card-svgs .svg {
          opacity: 0.1;
          position: absolute;
          transition: transform 250ms;
        }
        body #card-display-wrapper #card-display .card-wrapper .card .card-svgs .svg-left {
          left: 0px;
          top: 50%;
          transform: translate(-25%, -25%);
        }
        body #card-display-wrapper #card-display .card-wrapper .card .card-svgs .svg-right {
          right: 0px;
          top: -50%;
          transform: translate(25%, -25%);
        }
        body #card-display-wrapper #card-display .card-wrapper .card .card-amount {
          bottom: 0px;
          color: white;
          font-size: 5em;
          left: 0px;
          position: absolute;
          transform: translate(20px, -20px);
        }
        body #card-display-wrapper #card-display .card-wrapper .card .card-brand {
          color: white;
          font-size: 2.5em;
          position: absolute;
          right: 0px;
          top: 0px;
          transform: translate(-30px, 30px);
          transition: transform 250ms;
        }
        body #card-display-wrapper #card-display .card-wrapper .card .card-icon {
          bottom: 0px;
          color: white;
          font-size: 10em;
          position: absolute;
          right: 0px;
          transform: translate(-20px, 20%);
          transition: transform 250ms;
        }
        body #card-display-wrapper #card-display .card-wrapper .card-chef {
          left: 0px;
          opacity: 0;
          position: absolute;
          top: 0px;
          transition: opacity 250ms, top 250ms;
          z-index: 1;
        }
        body #card-display-wrapper #card-display .card-wrapper .card-chef i {
          color: white;
          text-align: center;
        }
        body #card-display-wrapper #card-display .card-wrapper .card-chef .fa-user-chef {
          color: white;
          font-size: 3.5em;
          height: 60px;
          line-height: 60px;
          width: 50px;
        }
        body #card-display-wrapper #card-display .card-wrapper .card-chef .fa-fire {
          bottom: 0px;
          font-size: 2em;
          left: 50%;
          position: absolute;
          transform: rotate(180deg) translate(50%, -90%);
        }
        
        #youtube-link {
          align-items: center;
          backdrop-filter: blur(3px);
          background-color: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 100px;
          box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
          bottom: 10px;
          cursor: pointer;
          display: inline-flex;
          gap: 5px;
          left: 10px;
          padding: 10px 20px;
          position: absolute;
          text-decoration: none;
          z-index: 1;
        }
        #youtube-link:hover {
          background-color: rgba(255, 255, 255, 0.2);
          border: 1px solid rgba(255, 255, 255, 0.3);
        }
        #youtube-link i, #youtube-link span {
          height: 20px;
          line-height: 20px;
        }
        #youtube-link i {
          color: #ef5350;
        }
        #youtube-link span {
          color: white;
        }
        
        @media (max-width: 1700px) {
          #card-display-wrapper {
            transform: scale(0.8);
          }
        }
        @media (max-width: 1300px) {
          #card-display-wrapper {
            transform: scale(0.5);
          }
        }
    </style>




</head>

<body>
    <div id="card-display-background" class="background-image"></div>
    <div id="card-display-wrapper">
        <div id="card-display">
  .........完整代码请登录后点击上方下载按钮下载查看