我试图制作一个圆形相机快门相机，但我很难让它看起来很逼真。
它应该是这样的：
以下是我尝试过的代码：
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>第一个“花瓣”应该低于最后一个，高于下一个。
怎么做？
解决方案是考虑到您具有对称形状的事实，因此您可以使用两个不同的元素构建它，在其中应用相同的东西，然后旋转其中一个元素以产生一种形状的错觉。
我将使用多重背景和线性渐变来创建它：
一点数学
由此我们可以确定旋转的角度。第一个将是 -
45 градусов / 2 = 22,5度。然后我们放大 45 度以找到其余部分：
代码将变为：
您可能会注意到我们需要 2 个额外的渐变，因为会有更多的缺失线。
要控制形状，你必须调整值
color stops（--p1和--p2）并调整附加渐变的大小（仍然需要找到这些值之间的关系）通过添加更多层并正确计算旋转度，我们可以轻松过渡到任何多边形形状。
十边形示例：
快门动画
Альтернативное решение
Специально посмотрел видео, как устроена диафрагма.
На HTML+CSS сделать реалистично намного сложнее чем на SVG.
Вся сложность данного примера в подсчете координат конечной точки дуги, образующей границу створки диафрагмы.
Здесь я воспользовался одним наблюдением, не проверял работает ли оно в общем случае, для 6 створок работает идеально.
Эта точка лежит на окружности, построенной через точку крепления соседней по часовой стрелке створки, с таким же радиусом как и у ограничивающей окружности.
UPD：减少了文档结构更改的数量，现在形状具有正确的形状并添加了填充，因此它们可以充当光圈 - 覆盖另一个图像
此答案中的片段支持不同数量的虹膜襟翼。
该解决方案基于寻找两个圆的交点的算法