如何解决CSS Transitions 动画与 JS、动画 Js 或 GSAP
尝试使用animeJs或GSAP或purE Js在JavaScript中重新创建下面的设计,我的思考过程是sass,我想不出更多,请帮助
<div id='container'>
<img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixid=MnwxMjA3fdb8MHxzZWFyY2h8MXx8c3VucmlzZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt='view' id="img1" class="images" />
<img src="https://media.istockphoto.com/photos/colored-powder-explosion-abstract-closeup-dust-on-backdrop-colorful-picture-id1072093690?k=6&m=1072093690&s=612x612&w=0&h=Eyk67XBt4sr3Bk1MubM6dHpvEVNICX4L7FumWhcTwuY=" alt='powder' id="img2" class="images" />
<img src="https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG" alt='powder' id="img3" class="images" />
<img src="https://cdn.jpegmini.com/user/images/slider_puffin_before_mobile.jpg" alt='bird' id="img4" class="images" />
</div>
#container {
.images {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
transform: translate(-50%,-50%);
@for $i from 1 through 4 {
$rotation: random(40) - 20deg;
&:nth-child(#{$i}) {
transform: translate(-50%,-50%) rotate($rotation);
z-index: -1 * $i; //reverses indexes
animation: fly#{$i} 4s linear #{1s * $i};
}
@keyframes fly#{$i} {
0% {
transform: translate(-50%,-50%) rotate($rotation);
}
50% {
transform: translate(800%,-50%) rotate($rotation);
}
100% {
transform: translate(800%,-50%) rotate($rotation);
}
}
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。