애니메이션 재생 버튼 - 순수 CSS

안녕! 나는 Mostafa이고 이것은 DEV에 대한 나의 첫 번째 게시물입니다.
여기 내가 이것을 어떻게 구축했는지 설명하고 싶습니다.



우선, 우리는 체크박스 해킹을 사용하므로 우리 몸은 체크박스와 라벨을 포함해야 합니다.

<input type="checkbox" name="play-checkbox" id="play-checkbox">
<label for="play-checkbox">
  <div class="play">
  </div>
</label>

그런 다음 몇 가지 기본 스타일링:

*,
*:after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
:root {
  --primary-color: #242424;
  --background-color: #01af5b;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color);
}
#play-checkbox {
  display: none;
}

우리의 목표는 두 개의 삼각형을 만들고 이를 사용하여 다른 삼각형을 만들고 마지막으로 이 삼각형을 두 개의 수직 막대로 바꾸는 것입니다.

.play {
  height: 22rem;
  width: 22rem;
  border: 1rem var(--primary-color) solid;
  border-radius: 40rem;
  overflow: hidden;
  position: relative;
}
.play::before,
.play::after {
  content: "";
  position: absolute;
  width: 10rem;
  height: 5.8rem;
  transition: all 400ms ease-out;
  left: 6.7rem;
}

전체 요소의 너비는 20rem(테두리의 경우 2rem)이고 플레이 삼각형의 높이는 삼각법 개념에서 10rem입니다. 여기서는 너비가 10rem임을 의미합니다.
높이의 경우 수학을 사용합니다.


높이=10rem*tan⁡30°≃5.8rem
높이 = 10 rem *\tan 30\degree\simeq 5.8 rem
높이=10rem*tan30°≃5.8rem

그리고 left:6.7rem는 그것을 가로로 가운데에 놓습니다(삼각법을 다시 사용하여: 큰 삼각형과 원의 중심이 같아야 합니다.).
이제 큰 삼각형의 너비는 10rem이고 높이는 11.6rem입니다. 그래서 중앙에 4.2rem이 필요합니다.
이제 선형 그래디언트를 사용하여 두 개의 삼각형을 만듭니다.

.play::before {
  top: 4.2rem;
  background-image: linear-gradient(
    30deg,
    var(--primary-color) 49%,
    transparent 50%
  );
}
.play::after {
  top: 10rem;
  background-image: linear-gradient(
    -30deg,
    transparent 49%,
    var(--primary-color) 50%
  );
}

첫 번째 부분이 끝났습니다. 명심하세요: ::before 의 중심: (top:7.1rem,left:11.7rem) 및 ::after 의 중심: (top:12.9rem,left:11.7rem) .

다음 부분에서는 3가지 작업을 수행해야 합니다.

배경 그라데이션 제거

폭 감소

가상 요소를 최종 위치로 회전 및 이동합니다.

체크박스 해킹 코드를 추가해 보겠습니다.

#play-checkbox:checked + label .play::before {
 /*
increase background size
transform:some rotation,translate and scale
*/ 
}
#play-checkbox:checked + label .play::after {
 /*
increase background size
transform:some rotation,translate and scale
*/ 
}

배경의 경우 배경 크기를 100%에서 400%로 늘리기만 하면 됩니다(실제로는 300%면 충분합니다.)

변환:
최종 일시 중지 버튼 모양, 2.5rem 너비와 5rem 간격의 두 막대를 상상해 보십시오.


2.5/5.8=0.43
2.5/5.8 = 0.43
2.5/5.8=0.43

, 따라서 Y 배율 인수는 0.43이 되고 높이는 변경되지 않습니다.
최종 상태에서 ::before 의 중심: (top:10rem,left:6.25rem) 및 ::after 의 중심: (top:10rem,left:13.75rem) 가 있습니다.
따라서 ::before 왼쪽으로 5.45rem, 아래로 2.9rem, 오른쪽으로 ::after 2.05rem, 위로 2.9rem 이동해야 합니다.
CSS에서는 다음을 의미합니다.

{
transform: translate(-5.45rem, 2.9rem)
}
/* and */
{
transform: translate(2.05rem, -2.9rem)
}

이제 작업을 완료할 수 있습니다.
여러 변환 함수를 사용할 때 순서가 중요합니다.

.play::before,
.play::after {
  /* Don't forget this */
  background-size: 100%;
}
#play-checkbox:checked + label .play::before {
  background-size: 400%;
  transform: translate(-5.45rem, 2.9rem) rotate(90deg) scaleY(0.43);
}
#play-checkbox:checked + label .play::after {
  background-size: 400%;
  transform: translate(2.05rem, -2.9rem) rotate(90deg) scaleY(0.43);
}

이제 버튼이 작동합니다! 무슨 일이 일어나고 있는지 정확히 보려면 ​​전환 시간을 늘리십시오.
고맙습니다!