如何解决使用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,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,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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
