css样式半环形 |html5 css3 3d

.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) + '%';
})

大家监听了滚动事件，获取页面滚动的距离，计算半环形的旋转角度和位移距离，实现了一个简单的半环形图展示效果。