Html 尝试使用div创建相机快门效果

我试着做一个圆形的相机快门，但我有一个问题，使它看起来正确

应该是这样的：

第一个“花瓣”应该比最后一个低，比下一个高。怎么做

下面是我尝试过的：

让partAmount=10；
让cont=document.getElementById（'cont'）；
让零件=[]；
对于（i＝1；i）这里的技巧是考虑对称形状的事实，所以你可以使用两个不同的元素来构建它，在应用相同的东西时，你旋转其中一个来创建一个形状的错觉。

我会考虑同样的想法并依赖于多个背景和<代码>线性渐变< /代码>来创建：

.camera{
宽度：200px；
高度：200px；
保证金：自动；
边界半径：50%；
边框：1px实心；
溢出：隐藏；
位置：相对位置；
--c1：透明55%、#000钙（55%+1px）钙（55%+4px）、灰色钙（55%+5px）；
--c2：透明40%，#000钙（40%+1px）钙（40%+4px），灰色钙（40%+5px）；
}
.摄像机：：之前，
.照相机：：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：50%；
背景：
线性梯度（-153度，var（-c1）），
线性梯度（-107度，var（-c2）），
线性梯度（-73度，var（-c2）），
线性梯度（-27度，var（-c1））；
}
.照相机：：之后{
变换：旋转（180度）；
变换原点：右；
}
使用svg实现要简单得多


设r=80，
弧=（x，y，s）=>`A${r}，${r}，0,0，${s}，${x}，${y}`，
路径=（i，d）=>`；
功能upd（val）{
设step=Math.PI*（0.5+2/+count.value）；
设p1x=Math.cos（步长）*r；
设p1y=Math.sin（步）*r；
设cos=Math.cos（-val）；
设sin=Math.sin（-val）；
设c1x=p1x-cos*p1x-sin*p1y；
设c1y=p1y-cos*p1y+sin*p1x；
设dx=-sin*r-c1x；
设dy=r-cos*r-c1y；
设dc=Math.sqrt（dx*dx+dy*dy）；
设a=Math.atan2（dy，dx）-Math.acos（dc/2/r）；
设x=c1x+Math.cos（a）*r；
设y=c1y+Math.sin（a）*r；
设edge=`M${p1x}，${p1y}${arc（0，r，0）}${arc（x，y，1）}`；
edges.innerHTML=body.innerHTML=''；
for（设i=0；i<+count.value；i++）{
edges.innerHTML+=path（i，`fill=none stroke=black d='${edge}`）；
bodies.innerHTML+=path（i，`fill=lightgray d='${edge}${arc（p1x，p1y，0）}`）；
}
};
upd（0.5）；
addEventListener（'mousemove'，e=>upd（e.y/innerHeight*1.04））；



另一种解决方案是使用简单图像（或svg使其清晰）和简单css动画。您可以创建覆盖图像，如下所示：


将其环绕成一个圆圈，然后使用css简单地放大和缩小覆盖：


div{
宽度：150px；
高度：150像素；
背景：#dbdb；
边界半径：50%；
溢出：隐藏；
位置：相对位置；
变换：translateZ（0）；
}
div：：之后{
位置：绝对位置；
左：0；
排名：0；
右：0；
底部：0；
内容：''；
背景：url("数据：image/svg+xml，%3Csvg xmlns='1http://www.w3.org/2000/svg“宽度='36'高度='38'填充='%2354595f'填充规则='偶数'%3E%3Cpath d='M21.5 12.938L2519L-3.5 6.062h-7L11 19l3.5-6.062z'/%3E%3Cpath d='M18 24H18V18H18ZM0 13h18v1H0zm13.67 8.5l9 15.588-.866.5-9-15.588zM14.196.412l9-15.588-.866.5-9-15.588L-15.866.588ZM16.588-.588-15.866.588-.866.588ZM16-15.588-.588-.588。412l-9 15.588-.866-.5 9-15.588z'/%3E%3C/svg%3E”）无重复中心；
背景尺寸：封面；
过渡：0.3s；
边界半径：50%；
溢出：隐藏；
转换：比例（1.5）；
}
div:hover:：after{
变换：比例（1）；
}
最大的问题是快门叶片彼此重叠。虽然可以通过操纵快门周围的z轴来模拟重叠，但无法使最后一个叶片的底部同时覆盖前一个叶片，而被第一个叶片覆盖（该组叶片的z值最低）可能是一个CSS大师有一个解决方案，To。“我肯定你是对的，但我会看这个问题，看看有没有解决办法。这是代码高尔夫吗？如果不是，为什么不使用SVG呢？@ Brad，你可以考虑发布一个答案来证明这一技术。