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 .c.........完整代码请登录后点击上方下载按钮下载查看