<div class="ccm-iris">
  <div class="ccm-iris-blade" style="--a: 0deg"></div>
  <div class="ccm-iris-blade" style="--a: 60deg"></div>
  <div class="ccm-iris-blade" style="--a: 120deg"></div>
  <div class="ccm-iris-blade" style="--a: 180deg"></div>
  <div class="ccm-iris-blade" style="--a: 240deg"></div>
  <div class="ccm-iris-blade" style="--a: 300deg"></div>
  <a href="#" class="ccm-iris-i" style="--a: -90deg">◐</a>
  <a href="#" class="ccm-iris-i" style="--a: -30deg">◑</a>
  <a href="#" class="ccm-iris-i" style="--a: 30deg">◒</a>
  <a href="#" class="ccm-iris-i" style="--a: 90deg">◓</a>
  <a href="#" class="ccm-iris-i" style="--a: 150deg">◉</a>
  <a href="#" class="ccm-iris-i" style="--a: 210deg">○</a>
</div>

.ccm-iris {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at center, #0a0a14 30%, #15151d);
  border: 4px solid #2a2a3e;
}

.ccm-iris-blade {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px;
  background: linear-gradient(135deg, #2a2a3e, #15151d);
  clip-path: polygon(50% 0%, 100% 50%, 50% 50%);
  transform: rotate(var(--a)) translateY(-30px);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.ccm-iris:hover .ccm-iris-blade {
  transform: rotate(calc(var(--a) + 30deg)) translateY(-50px);
}

.ccm-iris-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px;
  border-radius: 50%;
  background: #1f1f2e;
  color: #00e5ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(0, 229, 255, 0.4);
  transform: rotate(var(--a)) translate(70px) rotate(calc(var(--a) * -1));
  opacity: 0;
  transition: opacity 0.4s ease 0.25s;
  z-index: 2;
}

.ccm-iris:hover .ccm-iris-i {
  opacity: 1;
}

.ccm-iris-i:hover {
  background: #00e5ff;
  color: #0a0a14;
}