实现原理是动画
进入页面 内容由下往上弹出
~<template>
<div class="main">121212121</div>
</template>
<script>
export default {
};
</script>
<style lang="scss" scoped>
.main {
opacity: 0;
font-size: 20px;
cursor: pointer;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideUp {
0% {
transform: translateY(60px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
</style>
动画由右往左缓慢逐渐消失
!<template>
<!-- 初始化进入页面 内容由下往上弹出 -->
<!-- 动画由右往左缓慢逐渐消失 -->
<div class="main" @touchmove.prevent @mousewheel.prevent>
<div class="pic-404">
<img class="pic-404__child" src="../../assets/image/404/404.png" alt />
<img class="pic-404__child left" src="../../assets/image/404/404_cloud.png" alt />
<img class="pic-404__child mid" src="../../assets/image/404/404_cloud.png" alt />
<img class="pic-404__child right" src="../../assets/image/404/404_cloud.png" alt />
</div>
</div>
</template>
<script>
export default {
};
</script>
<style lang="scss" scoped>
.main {
width: 110%;
height: 100vh;
display: flex;
cursor: pointer;
justify-content: space-between;
div {
flex: 1;
padding: 100px 20px;
}
.pic-404 {
:first-child {
width: 600px;
height: 300px;
position: relative;
}
&__child {
width: 100px;
height: 100px;
position: absolute;
&.left {
width: 80px;
top: 17px;
left: 220px;
opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
&.mid {
width: 46px;
top: 10px;
left: 420px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1.2s;
}
&.right {
width: 62px;
top: 100px;
left: 500px;
opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
@keyframes cloudLeft {
0% {
top: 17px;
left: 220px;
opacity: 0;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
@keyframes cloudMid {
0% {
top: 10px;
left: 420px;
opacity: 0;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
opacity: 0;
}
}
@keyframes cloudRight {
0% {
top: 100px;
left: 500px;
opacity: 0;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
}
80% {
top: 180px;
left: 340px;
opacity: 1;
}
100% {
top: 200px;
left: 300px;
opacity: 0;
}
}
}
}
}
</style>