【发布时间】：2020-07-24 08:09:32
【问题描述】：
我试图制作圆形相机快门，但无法让它看起来正确。
它应该是这样的：
第一个'花瓣'应该低于最后一个，高于下一个。该怎么做？
低于我尝试过的：
let partAmount = 10;
let cont = document.getElementById('cont');
let parts = [];
for(let i = 1; i <= partAmount; i++){
let partCont = createElement('div','partCont');
let part = createElement('div','part');
parts.push(part);
partCont.appendChild(part);
cont.appendChild(partCont);
partCont.style.transform = 'rotate('+ 360 / partAmount * i+'deg) translatey(-250px)';
}
function createElement(tag,className){
let elem = document.createElement(tag);
elem.classList.add(className);
return elem;
}#cont{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
}
.dia{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
}
.partCont{
position: absolute;
transform-origin: left top;
}
.part{
width: 500px;
height: 100px;
background-color: lightgray;
border-bottom: 3px solid gray;
box-sizing: border-box;
transform-origin: left bottom;
transform: rotate(60deg);
transition-duration: 1s;
}<div class="dia">
<div id="cont">
</div>
</div>【问题讨论】：
-
最大的问题是百叶窗叶片相互重叠。虽然您可以通过在百叶窗周围操纵 z 轴来模拟这一点，但您将无法使最后一个叶片的底部既覆盖前一个叶片，又被第一个叶片覆盖（它具有最低的 z 值组）。可能是有解决方案的 css 大师。
-
@Will 我确定你是对的，但我会看这个看看是否有解决方案。
-
这个代码是高尔夫吗？如果没有，为什么不改用 SVG？
-
@Brad 你可以考虑发布一个答案来展示这种技术。
标签： html css css-shapes