🎈首先说明，以下参考地址和我的代码没有任何关系，不要问我为什么，因为大牛写的代码我看不懂，涉及到了3D效果，所以很难搞😂！！但是自己又非常喜欢这种效果，于是就绞尽脑汁，想到了别的方法来实现~~~~~~ 😁😁(感觉效果很好)
其实实现起来不算困难，说实话只要你css功底够好，很快就能写出来的 👌 #####🎈知识点： 1.css的 perspective景深
不太了解的可以先参考 这篇文章
木有了,就是这么容易~~~~ 🙃
此处有用到 TweenLite，有看过我之前文章的小伙伴应该知道是什么，只是一个简单的引用库，用来处理位置偏移等动画效果的
基本原理已经交给你了，想要偷懒的小伙伴，可以直接捡现成的~~~~😘(基于vue项目的可以直接复制，其他的需要加以改造)
代码如下：
<template>
<div class="body" @mousemove="move">
<div class="cover"></div>
<div class="cloud_box">
<div
class="cloud"
v-for="(i,index) in 300"
:key="index"
:style="`width:${random(200,900)}px;left:${random(-200,200)}%;bottom:${random(-10,20)}%; animation-delay: ${random(-20,0)}s;`"
>
<img
v-if="index%2 == 0"
:style="random(0,index)%2 == 0?'transform:scaleX(-1);':''"
src="@/assets/img/cloud_1.png"
alt
/>
<img
v-if="index%2 != 0"
:style="random(0,index)%2 != 0?'transform:scaleX(-1);':''"
src="@/assets/img/cloud_3.png"
alt
/>
</div>
</div>
</div>
</template>
<script>
import { TweenLite } from "gsap";
export default {
data() {
return {
w: window.innerWidth,
h: window.innerHeight
};
},
methods: {
// 随机生成一个整数
random(min, max) {
return Math.floor(Math.random() * (max - min) + min);
},
//鼠标移入事件
move(e) {
let box = document.querySelector(".cloud_box");
let x = -(e.clientX - this.w / 2) * 0.2;
let y = e.clientY - this.h / 2;
TweenLite.to(box, 0.5, {
ease: Back.easeOut.config(1.7),
x: x,
y: -y * 0.5,
rotationZ: (x / this.w) * 100
});
}
}
};
</script>
<style lang="scss" scoped>
.cover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9;
}
.body {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: linear-gradient(
-150deg,
rgb(205, 224, 248) 0%,
rgb(51, 99, 161) 50%,
rgb(3, 55, 122) 100%
);
.cloud_box {
transform-style: preserve-3d;
position: absolute;
width: 100%;
height: 100%;
perspective: 500px;
animation: fadeIn 1s ease both 1;
.cloud {
transform-style: preserve-3d;
transform-origin: 50% 100%;
width: 200px;
height: 200px;
position: absolute;
bottom: 0;
opacity: 0;
animation-name: move;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform: translateZ(-2000px);
img {
width: 100%;
// filter:invert(1) blur(5px);
}
}
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes move {
0% {
opacity: 0;
}
20% {
opacity: 0.7;
}
100% {
opacity: 0.7;
transform: translateZ(500px) translateY(-100%);
}
}
</style>
