小编Art*_*nev的帖子

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

我试图制作一个圆形的相机快门,但是让它看起来正确时出现了问题。

这就是它的外观:

在此处输入图片说明

第一个“花瓣”应该低于最后一个,而要高于下一个。怎么做?

下面是我尝试过的:

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;
}
Run Code Online (Sandbox Code Playgroud)
#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; …
Run Code Online (Sandbox Code Playgroud)

html css css-shapes

10
推荐指数
2
解决办法
187
查看次数

标签 统计

css ×1

css-shapes ×1

html ×1