在使用CSS樣式制作半環形圖時，我們需要使用CSS3中的transform屬性。

.container {
width: 200px;
height: 100px;
position: relative;
overflow: hidden;  // 溢出內容隱藏
}
.shape {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f00;  // 圓形背景色
position: absolute;
bottom: 0;  // 距離底部為0，懸浮在底部
transform: translate(-50%,50%);
// 利用translate函數將圓形上移并向左平移，使其形成半環形
}
.mask {
width: 200px;
height: 100px;
background-color: #fff;  // 遮罩層背景色
position: absolute;
bottom: 0;  // 距離底部為0，懸浮在底部
}
.text {
position: absolute;
bottom: 0;  // 距離底部為0，懸浮在底部
text-align: center;
}

上面是基礎的HTML結構和CSS樣式，接下來我們需要給這個半環形圖添加動畫效果，讓它能夠隨著鼠標的滾動而展示不同的內容。我們使用JavaScript來實現這個效果。

window.addEventListener('scroll', function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const ratio = (scrollTop / (document.documentElement.scrollHeight - window.innerHeight));
var shape = document.querySelector('.shape');
shape.style.transform = `translate(-50%,${50 - ratio * 50}%) rotate(${ratio * 360}deg)`;
var text = document.querySelector('.text');
text.innerHTML = (ratio * 100).toFixed(0) + '%';
})

我們監聽了滾動事件，獲取頁面滾動的距離，計算半環形的旋轉角度和位移距離，實現了一個簡單的半環形圖展示效果。