.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; /* 讓容器根據內容自動調整大小 */ /* text-color: rgba(0, 40, 70, 1); 這一行應該移除 */ } .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.2); /* 懸停時放大 20% */ transition: transform 0.3s ease; /* 增加過渡效果 */ } .responsive-table { width: 100%; max-width: 100%; table-layout: auto; /* 自動調整列寬 */ } .responsive-table td { text-align: center; /* 文字水平置中 */ vertical-align: middle; /* 文字垂直置中 */ overflow: hidden; /* 隱藏超出部分 */ padding: 10px; /* 增加內邊距以便更好地居中 */ } .responsive-table-award { width: 100%; max-width: 100%; table-layout: auto; /* 自動調整列寬 */ } .responsive-table-award td { text-align: center; /* 文字水平置中 */ vertical-align: middle; /* 文字垂直置中 */ overflow: hidden; /* 隱藏超出部分 */ padding: 10px; /* 增加內邊距以便更好地居中 */ } /* 確保圖片居中並限制最大寬度 */ .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; /* 自動水平居中 */ } .nav_icon { max-width: 100%; /* 限制圖片最大寬度 */ height: auto; /* 自動調整高度 */ display: block; /* 使圖片作為塊元素 */ margin: 0 auto; /* 自動水平居中 */ } @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 { display: table; /* 恢復為表格模式 */ width: 100%; /* 確保表格佔滿寬度 */ } #award-table tr { display: flex; /* 使用 Flexbox 排列行 */ flex-wrap: wrap; /* 允許換行 */ justify-content: center; /* 置中對齊 */ } #award-table td { flex: 1 1 calc(25% - 10px); /* 每個單元格佔四分之一的寬度，並留出間距 */ margin: 5px; /* 單元格間距 */ text-align: center; /* 文字置中 */ padding: 0; /* 移除內邊距 */ box-sizing: border-box; /* 包含邊距 */ } #award-table td:nth-child(-n+4) .nav_icon { max-width: 50%; /* 設定圖片最大寬度 */ height: auto; /* 保持比例 */ display: block; /* 使圖片為塊元素 */ margin: 0 auto; /* 圖片居中 */ } /* 對後四張圖片 (5-8) 設定最大寬度為 100% */ #award-table td:nth-child(n+5) .nav_icon { max-width: 85%; /* 設定圖片最大寬度 */ height: auto; /* 保持比例 */ display: block; /* 使圖片為塊元素 */ margin: 0 auto; /* 圖片居中 */ } .nav_icon:hover { transform: scale(1.05); /* 懸停時放大 5% */ } .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 { display: table; /* 恢復為表格模式 */ width: 100%; /* 確保表格佔滿寬度 */ } #award-table tr { display: flex; /* 使用 Flexbox 排列行 */ flex-wrap: wrap; /* 允許換行 */ justify-content: center; /* 置中對齊 */ } #award-table td { flex: 1 1 calc(25% - 10px); /* 每個單元格佔四分之一的寬度，並留出間距 */ margin: 5px; /* 單元格間距 */ text-align: center; /* 文字置中 */ padding: 0; /* 移除內邊距 */ box-sizing: border-box; /* 包含邊距 */ } #award-table td:nth-child(-n+4) .nav_icon { max-width: 50%; /* 設定圖片最大寬度 */ height: auto; /* 保持比例 */ display: block; /* 使圖片為塊元素 */ margin: 0 auto; /* 圖片居中 */ } /* 對後四張圖片 (5-8) 設定最大寬度為 100% */ #award-table td:nth-child(n+5) .nav_icon { max-width: 85%; /* 設定圖片最大寬度 */ height: auto; /* 保持比例 */ display: block; /* 使圖片為塊元素 */ margin: 0 auto; /* 圖片居中 */ } .nav_icon:hover { transform: scale(1.05); /* 懸停時放大 5% */ } .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 { display: table; /* 恢復為表格模式 */ width: 100%; /* 確保表格佔滿寬度 */ } #award-table tr { display: flex; /* 使用 Flexbox 排列行 */ flex-wrap: wrap; /* 允許換行 */ justify-content: center; /* 置中對齊 */ } #award-table td { flex: 1 1 calc(25% - 10px); /* 每個單元格佔四分之一的寬度，並留出間距 */ margin: 5px; /* 單元格間距 */ text-align: center; /* 文字置中 */ padding: 0; /* 移除內邊距 */ box-sizing: border-box; /* 包含邊距 */ } #award-table td:nth-child(-n+4) .nav_icon { max-width: 50%; /* 設定圖片最大寬度 */ height: auto; /* 保持比例 */ display: block; /* 使圖片為塊元素 */ margin: 0 auto; /* 圖片居中 */ } /* 對後四張圖片 (5-8) 設定最大寬度為 100% */ #award-table td:nth-child(n+5) .nav_icon { max-width: 85%; /* 設定圖片最大寬度 */ height: auto; /* 保持比例 */ display: block; /* 使圖片為塊元素 */ margin: 0 auto; /* 圖片居中 */ } .nav_icon:hover { transform: scale(1.05); /* 懸停時放大 5% */ } .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 { display: table; /* 恢復為表格模式 */ width: 100%; /* 確保表格佔滿寬度 */ } #award-table tr { display: flex; /* 使用 Flexbox 排列行 */ flex-wrap: wrap; /* 允許換行 */ justify-content: center; /* 置中對齊 */ } #award-table td { flex: 1 1 calc(25% - 10px); /* 每個單元格佔四分之一的寬度，並留出間距 */ margin: 5px; /* 單元格間距 */ text-align: center; /* 文字置中 */ padding: 0; /* 移除內邊距 */ box-sizing: border-box; /* 包含邊距 */ } #award-table td:nth-child(-n+4) .nav_icon { max-width: 60%; /* 設定圖片最大寬度 */ height: auto; /* 保持比例 */ display: block; /* 使圖片為塊元素 */ margin: 0 auto; /* 圖片居中 */ } /* 對後四張圖片 (5-8) 設定最大寬度為 100% */ #award-table td:nth-child(n+5) .nav_icon { max-width: 100%; /* 設定圖片最大寬度 */ height: auto; /* 保持比例 */ display: block; /* 使圖片為塊元素 */ margin: 0 auto; /* 圖片居中 */ } .nav_icon:hover { transform: scale(1.05); /* 懸停時放大 5% */ } .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)
