diff --git a/pages/transition/page7/page7.vue b/pages/transition/page7/page7.vue index 03dda92..bedb338 100644 --- a/pages/transition/page7/page7.vue +++ b/pages/transition/page7/page7.vue @@ -2,7 +2,6 @@ - @@ -25,18 +24,30 @@ export default { background-position: center; height: 100vh; display: flex; - flex-direction: column; /* 纵向排列 */ - align-items: center; /* 水平居中 */ - justify-content: flex-end; /* 使内容向底部对齐 */ - position: relative; /* 为绝对定位子元素提供相对定位的上下文 */ + flex-direction: column; + align-items: center; + justify-content: flex-end; + position: relative; +} + +/* 渐变显示动画 */ +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } } .button { - position: absolute; /* 绝对定位 */ + position: absolute; width: 80%; height: 12%; - bottom: 5%; /* 距离底部 20% 的位置 */ - left: 50%; /* 水平居中 */ - transform: translateX(-50%); /* 通过 translateX 使其居中 */ + bottom: 5%; + left: 50%; + transform: translateX(-50%); + opacity: 0; /* 初始为透明 */ + animation: fadeIn 2s ease-in forwards; /* 2秒渐变显示 */ }