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

<template>
<!-- 背景 -->
1 month ago
<view class="background">
<image class="blue_background" src="/static/transition/page4/pictures/blue_background.png"></image>
1 month ago
<!-- 人物 -->
<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 {
1 month ago
methods: {
goToPage3() {
1 month ago
uni.navigateTo({
url: '/pages/transition/page5/page5' // 跳转到 page5
});
}
}
}
</script>
<style lang="scss">
1 month ago
.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;
}
1 month ago
/* Human 动画,从页面中部向上移动 */
.human {
position: absolute;
width: 75%;
1 month ago
height: 48%;
1 month ago
object-fit: contain; /* 保持图片比例 */
animation: moveUp 2s ease forwards;
top: 30%; /* 起始位置 */
1 month ago
transform: translateY(-50%); /* 垂直居中 */
}
/* Text 延迟显示 */
.text {
position: absolute;
width: 85%;
height: 12%;
1 month ago
object-fit: contain; /* 保持图片比例 */
animation: fadeIn 1s ease 2s forwards; /* 2秒后显示 */
opacity: 0;
top: 55%; /* 根据需要调整位置 */
1 month ago
}
/* 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%;
1 month ago
}
to {
top: 28%; /* 移动到页面顶部 10% */
1 month ago
}
}
/* 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>