zouyu

  • css3礼物进场动画

    javaScript

    css3礼物进场动画

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* CSS样式 */
    .gift-animation {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gift-icon {
      width: 80px;
      height: 80px;
      background-image: url('https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/59f841e4d0604a95a3a15152f82c415d~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?');
      background-size: cover;
      animation: gift-enter 1s ease-out forwards;
    }

    .gift-name {
      font-size: 24px;
      color: #ffffff;
      margin-left: 20px;
      opacity: 0;
      animation: name-enter 1s ease-out 0.5s forwards;
    }

    @keyframes gift-enter {
      0% {
        transform: translateX(-200px);
        opacity: 0;
      }

      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes name-enter {
      0% {
        transform: translateY(-20px);
        opacity: 0;
      }

      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }
  </style>

  <body>
    <div class="gift-animation">
      <div class="gift-icon"></div>
      <div class="gift-name">礼物名称</div>
    </div>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  </body>
</html>
    上次更新: