时间戳

首页 > 解决方案 > 使用animejs或javascript进行CSS过渡

javascript - 使用animejs或javascript进行CSS过渡

问题描述

https://twitter.com/P_h_l_i_x/status/1353659923834544128

从上面的链接中，我试图复制本页影响者部分中的整个过渡和动画，我对此的思考过程并没有为我提供任何解决方案。任何想法和可能的解决方案将不胜感激。谢谢！

 header {
      position: relative;
      height: 90px;
      // overflow: hidden;
      width: 90px;
      .image1 {
        position: absolute;
        width: 23.5rem;
        height: 27.5rem;
        top: 0.125rem;
        left: 0.1875rem;
        z-index: 0;
        background: #5a9f45;
        box-shadow: rgba(134, 198, 116, 0.1);
        // transform: rotate(-8deg);
        transition: all 0.2s linear;
      }
      .image2 {
        position: absolute;
        width: 23.5rem;
        height: 27.5rem;
        top: 0.125rem;
        left: 0.1875rem;
        z-index: -10;
        background: #5a9f45;
        box-shadow: rgba(134, 198, 116, 0.1);
        // transform: rotate(-8deg);
        transition: all 0.2s linear;
      }
     .image3 {
        position: absolute;
        width: 23.5rem;
        height: 27.5rem;
        top: 0.125rem;
        left: 0.1875rem;
        z-index: -20;
        background: #5a9f45;
        box-shadow: rgba(134, 198, 116, 0.1);
        // transform: rotate(-8deg);
        transition: all 0.2s linear;
      }
    }
    
    <!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>
    <!-- Comment here -->
    
    <body>
      <img src="./assets/desktop/Icon feather-instagram.svg" alt="" />
      <div class="for"></div>
      <h1 class="links">Hesgoal</h1>
      <div class="header">
        <img src=".src="http:/assets/best1placekitten.png"com/200/300" alt="" class="image1 img" />
        <img src=".src="http:/assets/best2placekitten.png"com/200/300" alt="" class="image2 img" />
        <img src=".src="http:/assets/best3placekitten.png"com/200/300" alt="" class="image3" />
    
      </div>
      <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> -->
    </body>
    
    </html>

标签： javascriptcssanime.js

解决方案

推荐阅读