이 글의 내용은 CSS를 사용하여 Apple 시스템의 앨범 아이콘(코드)을 구현하는 방법에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
https://github.com/comehope/front-end-daily-challenges
dom 정의, 컨테이너에는 8개의 요소가 포함됩니다. 각 요소 직사각형 색상 블록을 나타냅니다:
<div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
중앙 디스플레이:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #ccc; }
컨테이너 크기 정의:
.icon { width: 10em; height: 10em; font-size: 30px; background-color: #eee; border-radius: 20%; }
직사각형의 윤곽선을 그리고(테두리는 보조선이므로 결국 삭제됩니다) 상단 중앙에 배치합니다. 컨테이너의:
.icon { position: relative; display: flex; justify-content: center; box-sizing: border-box; padding: 1em; } .icon span { position: absolute; width: 22.5%; height: 37.5%; border: 1px dashed black; border-radius: 50% / 30%; }
사각형에 대해 아래 첨자 변수 --n
설정: --n
:
.icon span:nth-child(1) { --n: 1; } .icon span:nth-child(2) { --n: 2; } .icon span:nth-child(3) { --n: 3; } .icon span:nth-child(4) { --n: 4; } .icon span:nth-child(5) { --n: 5; } .icon span:nth-child(6) { --n: 6; } .icon span:nth-child(7) { --n: 7; } .icon span:nth-child(8) { --n: 8; }
让 8 个矩形依次旋转固定的角度,围合成一个圆形:
.icon span { transform-origin: center 105%; transform: rotate(calc((var(--n) - 1) * 45deg)); }
为矩形设置颜色变量 --c
.icon span:nth-child(1) { --c: rgba(243, 156, 18, 0.7); } .icon span:nth-child(2) { --c: rgba(241, 196, 15, 0.7); } .icon span:nth-child(3) { --c: rgba(46, 204, 113, 0.7); } .icon span:nth-child(4) { --c: rgba(27, 188, 155, 0.7); } .icon span:nth-child(5) { --c: rgba(65, 131, 215, 0.7); } .icon span:nth-child(6) { --c: rgba(102, 51, 153, 0.7); } .icon span:nth-child(7) { --c: rgba(155, 89, 182, 0.7); } .icon span:nth-child(8) { --c: rgba(242, 38, 19, 0.7); }8개의 직사각형이 고정된 각도로 순서대로 회전하여 원을 형성하도록 합니다:
.icon span { /* border: 1px dashed black; */ background-color: var(--c); }색상 변수 설정 직사각형의 경우
-- c
:
.icon span { mix-blend-mode: multiply; }8개의 직사각형을 색칠하고 보조선 역할을 하는 테두리를 삭제합니다.
.icon:hover span { animation: rotating 2s ease-in-out forwards; } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(calc((var(--n) - 1) * 45deg)); } }겹치는 색상이 겹쳐질 수 있도록 색상 혼합 모드를 설정합니다.
.icon span:nth-child(1) { --n: 9; }Add 마우스 오버 효과, 마우스를 가져갈 때 직사각형 색상 블록을 확장하는 애니메이션 실행:
rrreee
첫 번째 직사각형은 0도에서 0도로 이동하기 때문에 애니메이션 중에 회전하지 않습니다. 끝내려면 아래 첨자 변수를 수정하여 각도를 360도로 설정하세요.rrreee
완료되었습니다! 순수한 CSS를 사용하여 은박지를 찢는 텍스트 효과를 얻는 방법(코드 포함) CSS를 사용하여 네트워크 연결 상태를 모니터링하는 페이지를 구현하는 방법🎜🎜🎜위 내용은 순수 CSS를 사용하여 Apple 시스템의 앨범 아이콘을 구현하는 방법(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!