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

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

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