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.
115 lines
2.3 KiB
115 lines
2.3 KiB
<template>
|
|
<!-- 背景 -->
|
|
<view class="background">
|
|
<image class="blue_background" src="/static/transition/page5/pictures/blue_background.png"></image>
|
|
<!-- 人物 -->
|
|
<image class="human" src="/static/transition/page5/pictures/human.png"></image>
|
|
<!-- 文字 -->
|
|
<image class="text" src="/static/transition/page5/pictures/text.png"></image>
|
|
<!-- 按钮 -->
|
|
<image class="button" @click="goToPage6" src="/static/transition/page5/pictures/button.png"></image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
goToPage6() {
|
|
uni.navigateTo({
|
|
url: '/pages/transition/page6/page6' // 跳转到 page6
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.background {
|
|
background-image: url("/static/transition/page5/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;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Human 从右侧缓缓移动到屏幕中间 */
|
|
.human {
|
|
position: absolute;
|
|
width: 75%;
|
|
height: 48%;
|
|
top: 5%;
|
|
object-fit: contain;
|
|
animation: slideInLeft 2s ease forwards; /* 定义新的动画 */
|
|
right: -100%; /* 从屏幕右侧外部开始 */
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Text 延迟显示 */
|
|
.text {
|
|
position: absolute;
|
|
width: 85%;
|
|
height: 12%;
|
|
object-fit: contain;
|
|
animation: fadeIn 1s ease 2s forwards;
|
|
opacity: 0;
|
|
top: 55%;
|
|
}
|
|
|
|
/* Button 延迟显示并加缩放特效，放在右下角 */
|
|
.button {
|
|
position: absolute;
|
|
height: 10vh;
|
|
width: 22vw;
|
|
animation: fadeInScale 1s ease 2.5s forwards;
|
|
opacity: 0;
|
|
right: 5%;
|
|
bottom: 3%;
|
|
}
|
|
|
|
/* 定义 human 从右侧移动到中间的动画 */
|
|
@keyframes slideInLeft {
|
|
from {
|
|
right: -100%; /* 从屏幕右侧外部开始 */
|
|
}
|
|
to {
|
|
right: 12.5%; /* 到达屏幕中间位置 */
|
|
}
|
|
}
|
|
|
|
/* 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>
|