/* 全局樣式 */ .body { overflow-y: hidden; /* 初始隱藏垂直滾動 */ } .body.loaded { overflow-y: auto; /* 加載完成後恢復 */ } .respon-img, .nav_icon, .visible-text { opacity: 0; /* 初始透明度 */ transform: translateY(20px); /* 初始位置稍微向下 */ transition: opacity 0.5s ease, transform 0.5s ease; /* 過渡效果 */ } .visible-text a { text-decoration: none; /* 移除底線 */ } .visible-text a:hover, .visible-text a:focus, .visible-text a:active { text-decoration: none; /* 懸停、聚焦和點擊時移除底線 */ } .visible { opacity: 1; /* 顯示時的透明度 */ transform: translateY(0); /* 回到原始位置 */ }/* 通用圖片浮現效果 */ /* Banner 文字樣式 */ .banner-container { position: relative; /* 相對定位以便絕對定位子元素 */ display: inline-block; /* 讓容器根據內容自動調整大小 */ } .banner-text .banner-link { text-decoration: none !important; } .banner-text { position: absolute; /* 絕對定位 */ top: 30%; /* 垂直居中 */ left: 50%; /* 水平居中 */ transform: translate(-50%, -50%); /* 調整位置以居中 */ color: rgba(0, 70, 135, 1); /* 更深的藍色 */ font-size: 380%; /* 字體大小 */ font-weight: bold; /* 字體加粗 */ text-shadow: 1px 1px 0px white, /* 右下角白色陰影 */ -1px -1px 0px white, /* 左上角白色陰影 */ 1px -1px 0px white, /* 右上角白色陰影 */ -1px 1px 0px white; /* 左下角白色陰影 */ text-align: center; /* 文字置中 */ opacity: 0; /* 初始透明度 */ transition: opacity 0.5s ease; /* 過渡效果 */ text-decoration: none; /* 移除底線 */ white-space: pre-line; /* 允許換行 */ width: 90%; /* 相對於父容器的 80% */ max-width: 2000px; /* 設定最大寬度 */ line-height: 1.2; /* 設置行距（可以根據需要調整） */ opacity: 0; /* 初始透明度 */ transform: translate(-50%, 20px); /* 初始位置稍微向下 */ transition: opacity 0.5s ease, transform 0.5s ease, text-shadow 0.3s ease; /* 過渡效果 */ } .banner-text:hover { text-shadow: 0 0 10px rgba(255, 255, 255, 5), /* 明亮的光暈 */ 0 0 15px rgba(255, 255, 255, 3), /* 較大的光暈 */ 0 0 20px rgba(255, 255, 255, 2), /* 模糊的光暈 */ 0 0 25px rgba(255, 255, 255, 1); /* 更模糊的光暈 */ } .banner-text a { display: block; /* 使每個鏈接成為塊級元素 */ margin: 0; /* 移除邊距 */ } .sub-text { display: block; /* 使其成為塊級元素，強制換行 */ margin-top: 0.1px; /* 調整上邊距以增加間距 */ } .banner-text a:hover { text-decoration: none; /* 懸停時移除底線 */ background: none; /* 移除背景顏色 */ } .banner-text.visible { opacity: 1; /* 顯示時的透明度 */ transform: translate(-50%, 0); /* 向上移動到原始位置 */ } .banner-link { text-decoration: none; /* 移除底線 */ color: rgba(0, 70, 135, 1); /* 設定鏈接顏色 */ } .banner-link:visited { color: rgba(0, 70, 135, 1) !important; /* 已訪問鏈接顏色與正常顏色相同 */ } .banner-link:hover { text-decoration: none !important; /* 懸停時移除底線 */ } .banner-link:active { text-decoration: none !important; /* 點擊時移除底線 */ } /* 調整按鈕樣式 */ .button { position: absolute; /* 使用絕對定位 */ bottom: 40px; /* 距離底部 40px */ left: 50%; /* 左側居中 */ transform: translateX(-50%); /* 向左移動自身寬度的一半 */ padding: 3px 2px; /* 增加內邊距以增大按鈕 */ background-color: #004B87; /* 按鈕背景顏色 */ color: white; /* 按鈕文字顏色 */ border: none; /* 無邊框 */ border-radius: 40px; /* 圓角 */ font-size: 1.5rem; /* 增加字體大小 */ font-weight: bold; /* 字體加粗 */ cursor: pointer; /* 鼠標懸停時的指標 */ transition: background-color 0.3s, box-shadow 0.3s, opacity 0.5s ease, transform 0.5s ease; /* 增加浮現效果 */ max-width: 450px; /* 可選：調整最大寬度 */ width: 80%; /* 設定寬度為 80% */ max-height: 70px; /* 可選：調整最大高度 */ overflow: hidden; /* 隱藏超出部分 */ white-space: nowrap; /* 不換行 */ text-overflow: ellipsis; /* 超出部分以省略號顯示 */ opacity: 0; /* 初始透明度 */ transform: translate(-50%, 20px); /* 初始位置稍微向下 */ } .button.visible { opacity: 1; /* 顯示時的透明度 */ transform: translate(-50%, 0); /* 向上移動到原始位置 */ } .button:hover { background-color: #0056b3; /* 懸停時的背景顏色 */ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); /* 增加陰影 */ } /* 懸停效果 */ .respon-img:hover, .nav_icon:hover { transition: transform 0.3s ease; /* 增加過渡效果 */ } .respon-img[alt="Life thumbnail"]:hover, .respon-img[alt="Career thumbnail"]:hover { transform: scale(1.1); /* 懸停時放大 5% */ transition: transform 0.3s ease; /* 增加過渡效果 */ overflow: hidden; /* 防止溢出 */ } .nav_icon:hover { transform: scale(1.12); /* 懸停時放大 20% */ transition: transform 0.3s ease; /* 增加過渡效果 */ overflow: hidden; /* 防止溢出 */ } .responsive-table { width: 100%; max-width: 100%; table-layout: auto; /* 自動調整列寬 */ } .responsive-table td { text-align: center; /* 文字水平置中 */ vertical-align: middle; /* 文字垂直置中 */ overflow: hidden; /* 隱藏超出部分 */ padding: 10px; /* 增加內邊距以便更好地居中 */ } /* 更新為 Flexbox 的 award-table 樣式 */ .responsive-table-award { width: 100%; max-width: 100%; display: flex; /* 將表格設為 flex 容器 */ justify-content: center; /* 確保內容居中 */ overflow-x: hidden; /* 新增：隱藏橫向溢出 */ overflow-y: hidden;; /* 新增 */ } .responsive-table-award tr { display: flex; flex-wrap: wrap; justify-content: center; gap: 0px; row-gap: 0px; /* 垂直間距設為 0px */ max-width: 1800px; margin: 0 auto; overflow-x: hidden; /* 新增：隱藏橫向溢出 */ overflow-y: hidden; /* 新增：隱藏橫向溢出 */ } .responsive-table-award td { flex: 0 0 auto; /* 不固定寬度，讓圖示保持原始大小 */ display: flex; /* 使用 Flexbox 控制內容 */ align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ padding: 2px; /* 內邊距 */ box-sizing: border-box; /* 包含邊距和內邊距 */ min-height: 100px; /* 設定最小高度，確保一致性 */ overflow-x: hidden; /* 新增：隱藏橫向溢出 */ overflow-y: hidden; /* 新增：隱藏橫向溢出 */ } .nav_icon { width: auto; /* 保持圖示原始寬度 */ max-width: 200px; /* 基礎最大寬度，作為默認值 */ max-height: 150px; /* 限制最大高度，保持一致性 */ height: auto; /* 自動調整高度 */ display: block; /* 使圖片作為塊元素 */ margin: 0 auto; /* 自動水平居中 */ opacity: 0; /* 初始透明度 */ transform: translateY(20px); /* 初始向下偏移 */ transition: opacity 0.5s ease, transform 0.5s ease; /* 添加過渡效果 */ } .nav_icon.visible { opacity: 1; /* 顯示時透明度 */ transform: translateY(0); /* 回到原始位置 */ } /* 確保圖片居中並限制最大寬度 */ .thumbnail-container { overflow: hidden; /* 隱藏溢出的部分 */ position: relative; /* 相對定位以便子元素絕對定位 */ width: 100%; /* 設定容器寬度 */ max-width: 100%; /* 設定容器寬度 */ height: auto; /* 設定容器高度 */ margin: 0 auto; /* 水平居中 */ } .thumbnail-container:hover .respon-img { transform: scale(1.1); /* 在懸停時放大10% */ transition: transform 0.3s ease; /* 增加過渡效果 */ } .respon-img { transition: transform 0.3s ease; /* 平滑過渡效果 */ max-width: 100%; /* 限制圖片最大寬度 */ height: auto; /* 自動調整高度 */ display: block; /* 使圖片作為塊元素 */ margin: 0 auto; /* 自動水平居中 */ } @media (min-width: 1025px) { #award-table tr { max-width: 1600px; gap: 0px; row-gap: 0px; /* 垂直間距設為 0px */ overflow-x: hidden; overflow-y: hidden; /* 大螢幕同步隱藏垂直溢出 */ } #award-table tr.loaded { overflow-y: auto; /* 大螢幕恢復 */ } #award-table td .nav_icon { max-width: 150px; max-height: 150px; } #award-table td { min-height: 100px; } .nav_icon:hover { transform: scale(1.12); } } @media (max-width: 1200px) { .banner-text { font-size: 300%; } } @media (min-width: 768px) and (max-width: 1024px) { .button { font-size: 125%; /* 在小螢幕上稍微縮小字體 */ padding: 3px 2px; /* 調整內邊距 */ bottom: 32px; /* 距離底部 35px */ width: 70%; } .banner-text { font-size: 250%; } #award-table tr { max-width: 1000px; /* 中螢幕最大寬度 */ gap: 0px; row-gap: 0px; /* 垂直間距設為 0px */ } #award-table td { min-height: 100px; /* 中螢幕高度 */ } #award-table td .nav_icon { max-width: 140px; /* 中螢幕稍微減小 */ max-height: 100px; } .nav_icon:hover { transform: scale(1.05); } .visible-text { font-size: 100%; } } @media (min-width: 650px) and (max-width: 767.9px) { .button { font-size: 115%; /* 在更小的螢幕上進一步縮小字體 */ padding: 2px 2px; /* 調整內邊距 */ bottom: 26px; /* 距離底部 30px */ width: 50%; } .banner-text { font-size: 240%; } #award-table tr { max-width: 800px; /* 平板最大寬度 */ gap: 0px; row-gap: 0px; /* 垂直間距設為 0px */ } #award-table td { min-height: 100px; /* 平板高度 */ } #award-table td .nav_icon { max-width: 130px; /* 平板進一步減小 */ max-height: 100px; } .nav_icon:hover { transform: scale(1.05); } .visible-text { font-size: 100%; } } @media (min-width: 469px) and (max-width: 649px) { .button { font-size: 100%; /* 在更小的螢幕上進一步縮小字體 */ padding: 1px 1px; /* 調整內邊距 */ bottom: 15px; /* 距離底部 25px */ width: 50%; } .banner-text { font-size: 160%; } #award-table tr { max-width: 600px; /* 小平板最大寬度 */ gap: 0px; row-gap: 0px; /* 垂直間距設為 0px */ } #award-table td { min-height: 100px; /* 小平板高度 */ } #award-table td .nav_icon { max-width: 100px; /* 小平板進一步減小 */ max-height: 100px; } .nav_icon:hover { transform: scale(1.05); } .visible-text { font-size: 100%; } } @media (max-width: 468px) { .button { font-size: 90%; /* 在更小的螢幕上進一步縮小字體 */ padding: 1px 1px; /* 調整內邊距 */ bottom: 16px; /* 距離底部 18px */ width: 50%; } .banner-text { font-size: 150%; top: 25%; /* 垂直居中 */ } #award-table tr { max-width: 400px; /* 手機最大寬度 */ gap: 0px; row-gap: 0px; /* 垂直間距設為 0px */ } #award-table td { min-height: 100px; /* 手機高度 */ } #award-table td .nav_icon { max-width: 80px; /* 手機最小尺寸 */ max-height: 80px; } .nav_icon:hover { transform: scale(1.05); } .visible-text { font-size: 100%; } } @media (max-width: 390px) { .button { font-size: 80%; /* 在更小的螢幕上進一步縮小字體 */ padding: 1px 1px; /* 調整內邊距 */ bottom: 15px; /* 距離底部 25px */ width: 50%; } } 携手缔造优质及具活力的城市环境 职位空缺 市建职涯 市建生活 const button = document.getElementById('myButton'); const images = document.querySelectorAll('.respon-img, .nav_icon'); const texts = document.querySelectorAll('.visible-text'); const bannerText = document.getElementById('bannerText'); // 當頁面加載時，添加浮現效果 window.onload = function() { // 為所有圖片和文字添加浮現效果 images.forEach(img => img.classList.add('visible')); texts.forEach(text => text.classList.add('visible')); // 添加 banner text 的浮現效果 setTimeout(() => { bannerText.classList.add('visible'); // 添加橫幅文字的浮現效果 }, 500); // 在 0.5 秒後顯示 banner text // 按鈕延遲顯示 setTimeout(() => { button.classList.add('visible'); }, 500); // 在 0.5 秒後顯示按鈕 };
.png)
