forked from fzu102201435/front
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
2.4 KiB
118 lines
2.4 KiB
<template>
|
|
<!-- 背景 -->
|
|
<view class="background">
|
|
|
|
<image class="blue_background" src="/static/transition/page4/pictures/blue_background.png"></image>
|
|
<!-- 人物 -->
|
|
<image class="human" src="/static/transition/page4/pictures/human.png"></image>
|
|
<!-- 文字 -->
|
|
<image class="text" src="/static/transition/page4/pictures/text.png"></image>
|
|
<!-- 按钮 -->
|
|
<image class="button" @click="goToPage3" src="/static/transition/page4/pictures/button.png"></image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
goToPage3() {
|
|
uni.navigateTo({
|
|
url: '/pages/transition/page5/page5' // 跳转到 page5
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.background {
|
|
background-image: url("/static/transition/page4/pictures/background.png");
|
|
background-size: cover;
|
|
background-position: center;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.blue_background {
|
|
position: absolute;
|
|
top: 0%;
|
|
width: 100%;
|
|
height: 50%;
|
|
object-fit: cover; /* 保持图片比例 */
|
|
animation: fadeIn 1s ease forwards; /* 1秒后显示 */
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Human 动画，从页面中部向上移动 */
|
|
.human {
|
|
position: absolute;
|
|
width: 75%;
|
|
height: 48%;
|
|
|
|
|
|
object-fit: contain; /* 保持图片比例 */
|
|
animation: moveUp 2s ease forwards;
|
|
top: 30%; /* 起始位置 */
|
|
transform: translateY(-50%); /* 垂直居中 */
|
|
}
|
|
|
|
/* Text 延迟显示 */
|
|
.text {
|
|
position: absolute;
|
|
width: 85%;
|
|
height: 12%;
|
|
|
|
object-fit: contain; /* 保持图片比例 */
|
|
animation: fadeIn 1s ease 2s forwards; /* 2秒后显示 */
|
|
opacity: 0;
|
|
top: 55%; /* 根据需要调整位置 */
|
|
}
|
|
|
|
/* Button 延迟显示并加缩放特效，放在右下角 */
|
|
.button {
|
|
position: absolute;
|
|
height: 10vh;
|
|
width: 22vw;
|
|
animation: fadeInScale 1s ease 2.5s forwards; /* 2.5秒后显示并缩放 */
|
|
opacity: 0;
|
|
right: 5%; /* 距右边 5% */
|
|
bottom: 3%; /* 距底部 5% */
|
|
}
|
|
|
|
/* 定义 human 上移动画 */
|
|
@keyframes moveUp {
|
|
from {
|
|
top: 70%;
|
|
}
|
|
to {
|
|
top: 28%; /* 移动到页面顶部 10% */
|
|
}
|
|
}
|
|
|
|
/* Text 和 Button 的渐入动画 */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Button 的缩放渐入动画 */
|
|
@keyframes fadeInScale {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|