昨天介紹了一下display-grid，目前還沒有很常用到他，尚未接觸到有很多圖片排列的設計稿，以後有更多案例及實作技巧會繼續補充
今天要做的東西是第一次嘗試，如圖，今日主題及大魔王便是圖中的拉軸，JS的部分先略過，主要在紀錄CSS的部分。這次的切版我使用input type:range + progressBar.js套件，progressBar套件超好用，他有各種形狀的進度條，不過還有個頭痛的問題是進度條的拉軸按鈕，讓使用者可以拖動他，這一塊就得使用input type:range，然後再把他客製化成自己的樣式，話不多說上程式碼
<section
class="choose-moodToday vh-100 d-flex flex-column justify-content-center align-items-center"
>
<!-- 彈跳視窗 -->
<div
class="modal show"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
style="display: block"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content bg-primary-light rounded-4 p-6">
<div class="modal-header border-0">
<p class="fs-4 fw-bold text-center">
您完成了 5 分鐘正念冥想！<br />現在您的感覺如何？
</p>
</div>
<div class="modal-body position-relative">
<ul class="d-flex flex-column p-0 m-0 gap-6">
<li class="d-flex justify-content-between align-items-center">
<div class="number fw-bold fz-14">
非常棒<span class="ms-0">10</span>
</div>
<img
src="../assets/images/meditateComplete/face_Y_44.png"
alt=""
/>
</li>
<li class="d-flex justify-content-between align-items-center">
<div class="number fw-bold fz-14">
很好<span class="ms-5">8</span>
</div>
<img
src="../assets/images/meditateComplete/face_O_44.png"
alt=""
/>
</li>
<li class="d-flex justify-content-between align-items-center">
<div class="number fw-bold fz-14">
平靜<span class="ms-5">6</span>
</div>
<img
src="../assets/images/meditateComplete/face_G_44.png"
alt=""
/>
</li>
<li class="d-flex justify-content-between align-items-center">
<div class="number fw-bold fz-14">
低落<span class="ms-5">4</span>
</div>
<img
src="../assets/images/meditateComplete/face_P_44.png"
alt=""
/>
</li>
<li class="d-flex justify-content-between align-items-center">
<div class="number fw-bold fz-14">
沮喪<span class="ms-5">2</span>
</div>
<img
src="../assets/images/meditateComplete/face_B_44.png"
alt=""
/>
</li>
</ul>
<!-- 使用 ProgressBar.js 來展示橙色進度條 -->
<div
id="orange-progress"
class="progress-container position-absolute start-50 top-50 translate-middle"
></div>
<!-- 滑動條 -->
<input
type="range"
min="0"
max="1"
step="0.1"
value="0.5"
id="progress-slider"
class="slider"
orient="vertical"
/>
</div>
<div class="modal-footer border-0">
<a
type="button"
class="btn btn-primary-dark w-100"
href="./cheer-up.html"
>
確定
</a>
</div>
</div>
</div>
</div>
<!-- countdown-mask 倒數透明遮罩 -->
<section
class="container d-flex text-center text-white position-absolute z-2 d-flex justify-content-center align-items-center"
style="
background: rgba(60, 60, 60, 0.9);
transition: opacity 1s ease, visibility 0s 1s;
height: 844px;
width: 100%;
"
id="countdown-overlay"
></section>
<div class="container bg-primary-light">
<div class="mx-n3 pt-11 pb-20">
<!-- meditate-programming 冥想進行頁 -->
<div class="diologue d-flex flex-column align-items-center my-10">
<h3
class="d-inline fs-5 bg-white text-black py-5 px-7 rounded-pill"
>
完成了一次很棒的冥想呢！
</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="28"
viewBox="0 0 32 28"
fill="none"
class="mt-n2"
>
<path
d="M19.4641 26C17.9245 28.6667 14.0755 28.6667 12.5359 26L1.27757 6.5C-0.262028 3.83334 1.66247 0.5 4.74167 0.5L27.2583 0.5C30.3375 0.5 32.262 3.83333 30.7224 6.5L19.4641 26Z"
fill="white"
/>
</svg>
</div>
<div
class="meditate-progress d-flex justify-content-center position-relative"
>
<div id="static-progress-circle" style="width: 288px"></div>
<img
src="../assets/images/meditateComplete/VectorLeft.svg"
class="position-absolute end-0 top-50 me-4"
style="transform: scaleX(-1)"
alt=""
/>
<img
src="../assets/images/meditateCount/dolls-meditiating_YL_Y.png"
class="position-absolute top-50 start-50 translate-middle object-fit-none"
alt="dolls_meditiating_Y"
/>
<img
src="../assets/images/meditateComplete/VectorLeft.svg"
class="position-absolute start-0 top-50 ms-4"
alt=""
/>
</div>
<div class="bottom d-flex flex-column align-items-center">
<h4 class="fs-5 text-text-secondary fw-bold mt-12">您已經冥想了</h4>
<time
datetime="05:00"
class="d-block fs-10 text-text-secondary fw-bold mx-6 mb-8"
id="countdown"
style="letter-spacing: 4.8px"
>05:00</time
>
<img
src="../assets/images/meditateComplete/PlayButton_80.png"
alt=""
/>
</div>
</div>
</div>
</section>
.choose-moodToday {
/* Modal 外觀調整 */
.modal-dialog {
max-width: 284px; /* 固定寬度 */
}
.progress-container {
position: relative;
width: 320px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
svg {
transform: rotate(-90deg);
border-radius: 12px;
}
}
.slider {
-webkit-appearance: none;
width: 340px; /* 定義滑塊的長度，會在 transform 後變為高度 */
background: transparent;
position: absolute;
transform: rotate(-90deg) translateX(-50%); /* 將滑塊旋轉 90 度，使其垂直顯示 */
top: -12px;
left: -52px;
z-index: 10; /* 使滑塊位於進度條之上 */
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 40px;
height: 40px;
background: url("../assets/images/meditateComplete/level_btn_40.png") no-repeat center center;
background-size: contain;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 40px;
height: 40px;
background: url("../assets/images/meditateComplete/level_btn_40.png") no-repeat center center;
background-size: contain;
cursor: pointer;
}
}
// 橘色拉軸進度條
var bar1 = new ProgressBar.Line("#orange-progress", {
strokeWidth: 4,
easing: "easeInOut",
duration: 1400,
color: "#F0743E",
trailColor: "rgba(253, 231, 215, 0.8)",
trailWidth: 10,
svgStyle: { width: "100%", height: "100%" },
from: { color: "#F0743E" },
to: { color: "#F0743E" },
});
iThome鐵人賽
看影片追技術