forked from fzu102201435/front
				
			
						commit
						49d23dc820
					
				| @ -1,17 +1,103 @@ | ||||
| <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> | ||||
| </template> | ||||
| 
 | ||||
| <script> | ||||
| export default { | ||||
|   data() { | ||||
|     return {}; | ||||
|   methods: { | ||||
|     goToPage4() { | ||||
|       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; | ||||
| } | ||||
| 
 | ||||
| /* 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> | ||||
| @ -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", | ||||
|   "configHash": "3f4641d2", | ||||
|   "hash": "48f6c93b", | ||||
|   "configHash": "badd50c8", | ||||
|   "lockfileHash": "e3b0c442", | ||||
|   "browserHash": "619b4131", | ||||
|   "browserHash": "debd2ea0", | ||||
|   "optimized": {}, | ||||
|   "chunks": {} | ||||
| } | ||||
					Loading…
					
					
				
		Reference in new issue