.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); /* 回到原始位置 */ } /* Apply hover effect only to specific images */ .respon-img[alt="banner"] { width: 100%; /* 確保橫幅佔滿全寬 */ } .respon-img { cursor: pointer; max-width: 100%; /* 確保不超出父容器 */ height: auto; /* 自動調整高度以保持比例 */ width: 500px; /* 設定固定寬度 */ height: 400px; /* 設定固定高度 */ transition: transform 0.3s ease-in-out; } // .respon-img[alt="img1"]:hover, // .respon-img[alt="img2"]:hover, // .respon-img[alt="img3"]:hover { // transform: scale(1.05); // } .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; /* 增加過渡效果 */ } /* 調整按鈕樣式 */ .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); /* 增加陰影 */ } .back-button { display: inline-flex; align-items: center; padding: 10px 20px; margin: 20px 0; font-size: 16px; color: #ffffff !important; /* 確保字體顏色 */ font-weight: bold; /* 字體粗細 */ background-color: #004B87; /* 按鈕背景色 */ text-decoration: none !important; /* 確保無下劃線 */ border-radius: 5px; transition: background-color 0.3s, transform 0.3s; opacity: 0; /* 初始透明度 */ transform: translateY(20px); /* 初始位置稍微向下 */ } .back-button.visible { opacity: 1; /* 顯示時的透明度 */ transform: translateY(0); /* 向上移動到原始位置 */ } .back-button:hover { background-color: #1679C8; transform: scale(1.03); } /* 表格和圖片的額外樣式，確保圖片放大時不會引起溢出 */ .responsive-table { width: 100%; overflow: hidden; } .responsive-table td { overflow: hidden; position: relative; } @media (min-width: 768px) and (max-width: 1024px) { .button { font-size: 125%; /* 在小螢幕上稍微縮小字體 */ padding: 3px 2px; /* 調整內邊距 */ bottom: 32px; /* 距離底部 35px */ width: 70%; } #heading { font-size: 100%; /* 設置字體大小 */ } }/* 關閉第一個媒體查詢 */ @media (min-width: 650px) and (max-width: 767.9px) { .button { font-size: 115%; /* 在更小的螢幕上進一步縮小字體 */ padding: 2px 2px; /* 調整內邊距 */ bottom: 26px; /* 距離底部 30px */ width: 50%; } #heading { font-size: 100%; /* 設置字體大小 */ } } /* 關閉第二個媒體查詢 */ @media (min-width: 469px) and (max-width: 649px) { .button { font-size: 100%; /* 在更小的螢幕上進一步縮小字體 */ padding: 1px 1px; /* 調整內邊距 */ bottom: 15px; /* 距離底部 25px */ width: 50%; } #heading { font-size: 100%; /* 設置字體大小 */ } } /* 關閉第三個媒體查詢 */ @media (max-width: 468px) { .button { font-size: 90%; /* 在更小的螢幕上進一步縮小字體 */ padding: 1px 1px; /* 調整內邊距 */ bottom: 16px; /* 距離底部 18px */ width: 50%; } #heading { 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'); const texts = document.querySelectorAll('.visible-text'); const backButton = document.querySelector('.back-button'); // 當頁面加載時，添加浮現效果 window.onload = function () { // 為所有圖片和文字添加浮現效果 images.forEach(img => img.classList.add('visible')); texts.forEach(text => text.classList.add('visible')); backButton.classList.add('visible'); // 為 back 按鈕添加浮現效果 // 按鈕延遲顯示 setTimeout(() => { button.classList.add('visible'); }, 500); // 在 0.5 秒後顯示按鈕 };
