Question

Я пытался сделать круговую камеру затвора, но у меня проблема с тем, чтобы заставить ее выглядеть правильно.

Вот как это должно выглядеть:

Первый «лепесток» должен быть ниже, чем последний, и выше, чем следующий. Как это сделать?

Ниже того, что я пробовал:

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>

Codepen: https://codepen.io/enotix364/pen/yWrQQb

Temani Afif · Answer 1 · 06 июня 2019

Хитрость заключается в том, чтобы учесть тот факт, что у вас симметричная форма, поэтому вы можете построить ее, используя два разных элемента, где вы применяете одну и ту же вещь, а затем поворачиваете один из них, чтобы создать иллюзию одной формы.

Я рассмотрю ту же идею в в предыдущем вопросе и буду опираться на несколько фонов и linear-gradient, чтобы создать это:

.camera{
  width:200px;
  height:200px;
  margin:auto;
  border-radius: 50%;
  border:1px solid;
  overflow:hidden;
  position:relative;
  --c1: transparent 55%,#000 calc(55% + 1px) calc(55% + 4px),grey calc(55% + 5px);
  --c2: transparent 40%,#000 calc(40% + 1px) calc(40% + 4px),grey calc(40% + 5px);
}
.camera::before,
.camera::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:50%;
  background: 
    linear-gradient(-153deg,var(--c1)),      
    linear-gradient(-107deg,var(--c2)),      
    linear-gradient(-73deg ,var(--c2)),      
    linear-gradient(-27deg ,var(--c1));
}

.camera::after {
  transform:rotate(180deg);
  transform-origin:right;
}

<div class="camera">
</div>

Как вы можете видеть выше, мы почти рядом, и есть две пропущенные линии, которые мы можем добавить, используя дополнительный градиент, как показано ниже:

.camera{
  width:200px;
  height:200px;
  margin:auto;
  border-radius: 50%;
  border:1px solid;
  overflow:hidden;
  position:relative;
  --c1: transparent 55%,#000 calc(55% + 1px) calc(55% + 4px),grey calc(55% + 5px);
  --c2: transparent 40%,#000 calc(40% + 1px) calc(40% + 4px),grey calc(40% + 5px);
}
.camera::before,
.camera::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:50%;
  background: 
    linear-gradient( 153deg,var(--c1)) bottom/100% 43.5% no-repeat,    
    
    linear-gradient(-153deg,var(--c1)),      
    linear-gradient(-107deg,var(--c2)),      
    linear-gradient(-73deg ,var(--c2)), /* 180 - 107 = 73deg*/ 
    linear-gradient(-27deg ,var(--c1)); /* 180 - 153 = 27deg*/
}

.camera::after{
  transform:rotate(180deg);
  transform-origin:right;
}

<div class="camera">
</div>

Некоторые математики

В случае, если нам нужен точный расчет, мы должны учитывать, что нарисованная внутри фигура является восьмиугольником:

^исх

Из этого мы можем определить угол поворота. Первый будет 45deg/2 = 22.5deg. Затем мы увеличиваем на 45deg, чтобы найти остальные:

Код станет:

.camera{
  width:200px;
  height:200px;
  margin:auto;
  border-radius: 50%;
  border:1px solid;
  overflow:hidden;
  position:relative;
  --p1:55%;
  --p2:40%;
  
  --c1: transparent var(--p1),#000 calc(var(--p1) + 1px) calc(var(--p1) + 4px),grey calc(var(--p1) + 5px);
  --c2: transparent var(--p2),#000 calc(var(--p2) + 1px)calc(var(--p2) + 4px),grey calc(var(--p2) + 5px);
}
.camera::before,
.camera::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:50%;
  background: 
    linear-gradient( 112.5deg,var(--c1)) bottom right/10%  14% no-repeat,
    linear-gradient( 157.5deg,var(--c1)) bottom      /100% 54% no-repeat,    
    
    linear-gradient(-157.5deg,var(--c1)), /* -135deg */    
    linear-gradient(-112.5deg,var(--c2)), /* -90deg */     
    linear-gradient(-67.5deg ,var(--c2)), /* -45deg */
    linear-gradient(-22.5deg ,var(--c1));
}

.camera::after{
  transform:rotate(180deg);
  transform-origin:right;
}

<div class="camera">
</div>

Вы можете заметить, что нам понадобятся 2 дополнительных градиента, потому что будет больше пропущенных линий.

Чтобы управлять формой, вы должны отрегулировать значения цветовых остановок (--p1 и --p2) и скорректировать размер дополнительных градиентов (все еще нужно найти связь между этими значениями)

.camera{
  width:200px;
  height:200px;
  display:inline-block;
  border-radius: 50%;
  border:1px solid;
  overflow:hidden;
  position:relative;
  --p1:55%;
  --p2:40%;
  
  --c1: transparent var(--p1),#000 calc(var(--p1) + 1px) calc(var(--p1) + 4px),grey calc(var(--p1) + 5px);
  --c2: transparent var(--p2),#000 calc(var(--p2) + 1px)calc(var(--p2) + 4px),grey calc(var(--p2) + 5px);
}
.camera::before,
.camera::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:50%;
  background: 
    linear-gradient( 112.5deg,var(--c1)) bottom right/var(--e1,10%)  var(--e2,14%) no-repeat,
    linear-gradient( 157.5deg,var(--c1)) bottom      /100% var(--e3,54%) no-repeat,    
    
    linear-gradient(-157.5deg,var(--c1)), /* -135deg */    
    linear-gradient(-112.5deg,var(--c2)), /* -90deg */     
    linear-gradient(-67.5deg ,var(--c2)), /* -45deg */
    linear-gradient(-22.5deg ,var(--c1));
}

.camera::after{
  transform:rotate(180deg);
  transform-origin:right;
}

<div class="camera">
</div>

<div class="camera" style="--p1:65%;--p2:55%;  --e1:0;--e3:40%">
</div>

<div class="camera" style="--p1: 46%;--p2: 29%;  --e1: 26%;--e2: 35%;--e3: 62%;">
</div>

Мы можем легко перейти к любой форме многоугольника, добавив больше слоев и правильно рассчитав степень вращения.

Пример с декагоном:

.camera{
  width:200px;
  height:200px;
  display:inline-block;
  border-radius: 50%;
  border:1px solid;
  overflow:hidden;
  position:relative;
  --p1:60%;
  --p2:48%;
  --p3:38%;
  
  --c1: transparent var(--p1),#000 calc(var(--p1) + 1px) calc(var(--p1) + 4px),grey calc(var(--p1) + 5px);
  --c2: transparent var(--p2),#000 calc(var(--p2) + 1px) calc(var(--p2) + 4px),grey calc(var(--p2) + 5px);
  --c3: transparent var(--p3),#000 calc(var(--p3) + 1px) calc(var(--p3) + 4px),grey calc(var(--p3) + 5px);
}
.camera::before,
.camera::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:50%;
  background: 
    linear-gradient( 126deg,var(--c1)) bottom right/var(--e1,40%) var(--e2,20%) no-repeat,
    linear-gradient( 162deg,var(--c1)) bottom      /100% var(--e3,60%) no-repeat, 
    
    linear-gradient(-162deg,var(--c1)),
    linear-gradient(-126deg,var(--c2)),      
    linear-gradient(-90deg, var(--c3)),      
    linear-gradient(-54deg ,var(--c2)),
    linear-gradient(-18deg ,var(--c1)); /* 36deg/2 then we increment by 36deg*/
}

.camera::after{
  transform:rotate(180deg);
  transform-origin:right;
}

<div class="camera">
</div>
<div class="camera" style="--p1: 66.5%;--p2: 56%;--p3: 51%;  --e3: 51%;--e2: 8%;--e1: 13%;">
</div>

<div class="camera" style="--p1: 50%;--p2: 37%;--p3: 15%; --e3: 68%;--e2: 41%;--e1: 50%;">
</div>

Поскольку мы имеем дело с фоном, мы можем добавить дополнительный слой для изображения:

#camera{
  width:200px;
  height:200px;
  display:inline-block;
  border-radius: 50%;
  border:1px solid;
  overflow:hidden;
  position:relative;
  background:url(https://picsum.photos/id/155/800/800) center/80% 80%;
  --p1:60%;
  --p2:48%;
  --p3:38%;
  
  --c1: transparent var(--p1),#000 calc(var(--p1) + 1px) calc(var(--p1) + 3px),grey calc(var(--p1) + 4px);
  --c2: transparent var(--p2),#000 calc(var(--p2) + 1px) calc(var(--p2) + 3px),grey calc(var(--p2) + 4px);
  --c3: transparent var(--p3),#000 calc(var(--p3) + 1px) calc(var(--p3) + 3px),grey calc(var(--p3) + 4px);
}
#camera::before,
#camera::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:50%;
  background: 
    linear-gradient( 126deg,var(--c1)) bottom right/var(--e1,40%) var(--e2,20%) no-repeat,
    linear-gradient( 162deg,var(--c1)) bottom      /100% var(--e3,60%) no-repeat, 
    
    linear-gradient(-162deg,var(--c1)),
    linear-gradient(-126deg,var(--c2)),      
    linear-gradient(-90deg, var(--c3)),      
    linear-gradient(-54deg ,var(--c2)),
    linear-gradient(-18deg ,var(--c1)); /* 36deg/2 then we increment by 36deg*/
}

#camera::after{
  transform:rotate(180deg);
  transform-origin:right;
}

<div id="camera">
</div>
<div id="camera" style="--p1: 66.5%;--p2: 56%;--p3: 51%;  --e3: 51%;--e2: 8%;--e1: 13%;">
</div>

<div id="camera" style="--p1: 50%;--p2: 37%;--p3: 15%; --e3: 68%;--e2: 41%;--e1: 50%;">
</div>

Если вы хотите изменить направление жалюзи, просто умножьте все углы на -1 и переключите немного влево / вправо

.camera{
  width:200px;
  height:200px;
  display:inline-block;
  border-radius: 50%;
  border:1px solid;
  overflow:hidden;
  position:relative;
  --p1:60%;
  --p2:48%;
  --p3:38%;
  
  --c1: transparent var(--p1),#000 calc(var(--p1) + 1px) calc(var(--p1) + 4px),grey calc(var(--p1) + 5px);
  --c2: transparent var(--p2),#000 calc(var(--p2) + 1px) calc(var(--p2) + 4px),grey calc(var(--p2) + 5px);
  --c3: transparent var(--p3),#000 calc(var(--p3) + 1px) calc(var(--p3) + 4px),grey calc(var(--p3) + 5px);
}
.camera::before,
.camera::after{
  content:"";
  position:absolute;
  top:0;
  /*left:0;*/ right:0;
  height:100%;
  width:50%;
  background: 
    linear-gradient(-126deg,var(--c1)) bottom left/var(--e1,40%) var(--e2,20%) no-repeat,
    linear-gradient(-162deg,var(--c1)) bottom      /100% var(--e3,60%) no-repeat, 
    
    linear-gradient(162deg,var(--c1)),
    linear-gradient(126deg,var(--c2)),      
    linear-gradient(90deg, var(--c3)),      
    linear-gradient(54deg ,var(--c2)),
    linear-gradient(18deg ,var(--c1)); /* 36deg/2 then we increment by 36deg*/
}

.camera::after{
  transform:rotate(180deg);
  /*transform-origin:right;*/transform-origin:left;
}

<div class="camera">
</div>
<div class="camera" style="--p1: 66.5%;--p2: 56%;--p3: 51%;  --e3: 51%;--e2: 8%;--e1: 13%;">
</div>

<div class="camera" style="--p1: 50%;--p2: 37%;--p3: 15%; --e3: 68%;--e2: 41%;--e1: 50%;">
</div>

с анимацией

А вот идея создания анимации открытия / закрытия жалюзи:

.camera{
  width:200px;
  height:200px;
  display:inline-block;
  border-radius: 50%;
  border:1px solid;
  overflow:hidden;
  position:relative;
  background:url(https://picsum.photos/id/155/800/800) center/cover;
  --p1:60%;
  --p2:48%;
  --p3:38%;
  
  --c1: transparent var(--p1),#000 calc(var(--p1) + 1px) calc(var(--p1) + 4px),grey calc(var(--p1) + 5px);
  --c2: transparent var(--p2),#000 calc(var(--p2) + 1px) calc(var(--p2) + 4px),grey calc(var(--p2) + 5px);
  --c3: transparent var(--p3),#000 calc(var(--p3) + 1px) calc(var(--p3) + 4px),grey calc(var(--p3) + 5px);
}
.camera::before,
.camera::after{
  content:"";
  position:absolute;
  top:-50%;
  left:50%;
  height:200%;
  width:100%;
  transition:.5s all linear;
  background: 
    linear-gradient(-126deg,var(--c1)) bottom left/var(--e1,40%) var(--e2,20%) no-repeat,
    linear-gradient(-162deg,var(--c1)) bottom      /100% var(--e3,60%) no-repeat, 
    
    linear-gradient(162deg,var(--c1)),
    linear-gradient(126deg,var(--c2)),      
    linear-gradient(90deg, var(--c3)),      
    linear-gradient(54deg ,var(--c2)),
    linear-gradient(18deg ,var(--c1)); /* 36deg/2 then we increment by 36deg*/
}

.camera::after{
  transform:rotate(180deg);
  transform-origin:left;
}

.camera:hover::before,
.camera:hover::after {
  top:0;
  left:50%;
  height:100%;
  width:50%;
}

<div class="camera">
</div>

Нам просто нужно увеличить / уменьшить размер псевдоэлемента, сохранив ту же позицию.

Альтернативное решение

Мы можем объединить ваш код и идею двух симметричных фигур и создать его, как показано ниже:

let partAmount = 10;
let cont = document.querySelector('.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;
}
/*added*/
let alt = cont.cloneNode(true);
document.querySelector('.dia').appendChild(alt);

.cont{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  clip-path: polygon(0 -150px, 0 150px, -150px 150px,-150px -150px); /*added*/
}
.cont:last-child {
  transform:rotate(180deg); /*added*/
}
.dia{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  position:relative;
}
.partCont{
  position: absolute;
  transform-origin: left top;
}
.part{
  width: 300px;
  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 class="cont">
  </div>
</div>

Попытка создать эффект затвора камеры с помощью divs

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

с анимацией

Альтернативное решение

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Попытка создать эффект затвора камеры с помощью divs

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

с анимацией

Альтернативное решение

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы