CSS 올림픽 반지

이 기사는 2020 프로젝트 : 애니메이션 3D 올림픽 링을 다시 방문합니다. 원래 SCSS 코드는 기능적이지만 현대적인 효율성이 부족했습니다. 이 업데이트 된 버전은 순수한 CSS를 사용하여 삼각형 함수와 상대 색상 구문을 활용하여 클리너, 더 간결한 코드를 위해 상대 색상 구문을 활용합니다. 결과는보다 성능이 뛰어나고 우아한 솔루션입니다 3D 효과는 계층화 된 div를 사용하여 달성됩니다. 각 링은 16 개의 층으로 구성되며 각각은 약간 다른 그늘로 조명 효과를 만듭니다. 레이어의 크기와 위치는 3 차원 링의 환상을 만듭니다. HTML 구조

html은 5 개의

요소 (링당 1 개)로 구성되며, 각각은 층을 나타내는 16 개의 중첩 요소를 포함합니다. 각 요소는 CSS를 통한 스타일링을 제어하기 위해 사용자 정의 속성

속성은 레이어 위치, 크기 및 색상에 대한 CSS 계산의 승수 역할을합니다. CSS 스타일링

컨테이너는

를 사용하여 절대적으로 위치 된 고리를 포함합니다. 각각의 <div>는 절대적으로 위치되며, 그 어린이는 절대 포지셔닝을 상속합니다. <circ>는 원형 모양을 만듭니다. 사용자 정의 속성 <code><i></i>는 기본 색상을 설정합니다 <i></i> --i 속성은 음수 값으로 설정되어 요소 외부의 층을 위치시켜 크기를 효과적으로 정의합니다. 사용자 정의 속성은 를 사용하여 계산 된 z 축을 따라 레이어를 위치시켜 깊이를 만듭니다. 상대적인 색상 구문 가있는 음영 음영은 상대 색상 구문을 사용하여 달성됩니다. 에서 계산 된 A

<div class="rings">
  <div class="ring ring__1">
    <i style="--i: 1;"></i>
    <i style="--i: 2;"></i>
    <!-- ... more layers ... -->
    <i style="--i: 16;"></i>
  </div>
  <!-- ... more rings ... -->
</div>

사용자 정의 속성은 : 의 빛을 수정합니다.

이이 동적으로 층을 뒤쪽으로 어두워서 3D 효과를 향상시킵니다. 링의 내부 및 외부 모서리 모두에서 음영이 보이도록 개요가 추가됩니다. 형성 및 애니메이션 --i 기능을 사용하여 계산 된 사용자 정의 속성은 테두리 두께를 결정하여 링의 원형 모양을 만듭니다.

애니메이션은

및 속성을 ​​사용하여 구현됩니다. 각 반지의 애니메이션 지속 시간은 사용자 정의 속성

로 제어되며 애니메이션을 비틀 거리는 음의 지연이 있습니다. 최종 터치 및 최적화

컨테이너의 약간의 x 축 회전은 관점을 추가합니다. 유사 요소 ()는 흐릿한 그림자를 생성하여 3D 효과를 더욱 향상시킵니다. 최종 CSS는 최적화되고 재사용 가능하며 현대 CSS 기능의 힘을 보여줍니다. 코드는 원래 SCSS 버전보다 훨씬 더 효율적이고 유지 관리 가능합니다.