commit
49d23dc820
@ -1,17 +1,103 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="background">
|
||||||
|
<!-- 人物 -->
|
||||||
|
<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="goToPage4" src="/static/transition/page4/pictures/button.png"></image>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
methods: {
|
||||||
return {};
|
goToPage4() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/transition/page5/page5' // 跳转到 page5
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Human 动画,从页面中部向上移动 */
|
||||||
|
.human {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 48%;
|
||||||
|
|
||||||
|
object-fit: contain; /* 保持图片比例 */
|
||||||
|
animation: moveUp 2s ease forwards;
|
||||||
|
top: 50%; /* 起始位置 */
|
||||||
|
transform: translateY(-50%); /* 垂直居中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text 延迟显示 */
|
||||||
|
.text {
|
||||||
|
position: absolute;
|
||||||
|
width: 90%;
|
||||||
|
height: 17%;
|
||||||
|
|
||||||
|
object-fit: contain; /* 保持图片比例 */
|
||||||
|
animation: fadeIn 1s ease 2s forwards; /* 2秒后显示 */
|
||||||
|
opacity: 0;
|
||||||
|
top: 50%; /* 根据需要调整位置 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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: 50%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
top: 20%; /* 移动到页面顶部 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>
|
</style>
|
@ -0,0 +1,8 @@
|
|||||||
|
<template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/transition.iml" filepath="$PROJECT_DIR$/.idea/transition.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="WEB_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$">
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||||
|
</content>
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="$PROJECT_DIR$/../.." vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
@ -0,0 +1,57 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ChangeListManager">
|
||||||
|
<list default="true" id="fe49509e-66b4-4a6b-ab2d-3ef0674550e6" name="更改" comment="">
|
||||||
|
<change beforePath="$PROJECT_DIR$/../../unpackage/dist/cache/.vite/deps/_metadata.json" beforeDir="false" afterPath="$PROJECT_DIR$/../../unpackage/dist/cache/.vite/deps/_metadata.json" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/../../unpackage/dist/cache/.vite/deps/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/../../unpackage/dist/cache/.vite/deps/package.json" afterDir="false" />
|
||||||
|
</list>
|
||||||
|
<option name="SHOW_DIALOG" value="false" />
|
||||||
|
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||||
|
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||||
|
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||||
|
</component>
|
||||||
|
<component name="Git.Settings">
|
||||||
|
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/../.." />
|
||||||
|
</component>
|
||||||
|
<component name="ProjectId" id="2o1M2OtcNfb7BYpsadE3cgKuP5x" />
|
||||||
|
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
|
||||||
|
<component name="ProjectViewState">
|
||||||
|
<option name="hideEmptyMiddlePackages" value="true" />
|
||||||
|
<option name="showLibraryContents" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="PropertiesComponent"><![CDATA[{
|
||||||
|
"keyToString": {
|
||||||
|
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
||||||
|
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||||
|
"WebServerToolWindowFactoryState": "false",
|
||||||
|
"last_opened_file_path": "D:/webgl-examples/examples/front",
|
||||||
|
"vue.rearranger.settings.migration": "true"
|
||||||
|
}
|
||||||
|
}]]></component>
|
||||||
|
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="应用程序级" UseSingleDictionary="true" transferred="true" />
|
||||||
|
<component name="TaskManager">
|
||||||
|
<task active="true" id="Default" summary="默认任务">
|
||||||
|
<changelist id="fe49509e-66b4-4a6b-ab2d-3ef0674550e6" name="更改" comment="" />
|
||||||
|
<created>1730032420973</created>
|
||||||
|
<option name="number" value="Default" />
|
||||||
|
<option name="presentableId" value="Default" />
|
||||||
|
<updated>1730032420973</updated>
|
||||||
|
<workItem from="1730032422091" duration="31000" />
|
||||||
|
</task>
|
||||||
|
<servers />
|
||||||
|
</component>
|
||||||
|
<component name="TypeScriptGeneratedFilesManager">
|
||||||
|
<option name="version" value="3" />
|
||||||
|
</component>
|
||||||
|
<component name="Vcs.Log.Tabs.Properties">
|
||||||
|
<option name="TAB_STATES">
|
||||||
|
<map>
|
||||||
|
<entry key="MAIN">
|
||||||
|
<value>
|
||||||
|
<State />
|
||||||
|
</value>
|
||||||
|
</entry>
|
||||||
|
</map>
|
||||||
|
</option>
|
||||||
|
</component>
|
||||||
|
</project>
|
After Width: | Height: | Size: 33 KiB |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 1.5 MiB |
After Width: | Height: | Size: 39 KiB |
After Width: | Height: | Size: 23 KiB |
@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"hash": "239ea83a",
|
"hash": "48f6c93b",
|
||||||
"configHash": "3f4641d2",
|
"configHash": "badd50c8",
|
||||||
"lockfileHash": "e3b0c442",
|
"lockfileHash": "e3b0c442",
|
||||||
"browserHash": "619b4131",
|
"browserHash": "debd2ea0",
|
||||||
"optimized": {},
|
"optimized": {},
|
||||||
"chunks": {}
|
"chunks": {}
|
||||||
}
|
}
|
Loading…
Reference in new issue