매우 아름다운 CSS 별 효과 요약 페이지 1/2_경험 교환

순수한 CSS를 사용하여 별 등급 효과를 만드는 것은 온라인 RIA에서 점점 더 많이 사용되고 있으며 Ajax 및 기타 기술과 결합되어 뛰어난 시각 효과와 뛰어난 사용자 경험을 제공할 수 있습니다. 이 기사를 시작하기 전에 cssheaven으로 이동하여 이를 경험해 보세요. 첫 번째.

최근 프로젝트 필요로 인해 인터넷에서 CSS 별점에 대한 예시와 설명을 많이 찾아보았으나 대부분이 외국 기사를 번역한 것이고 설명이 그다지 명확하지 않은 것을 발견하여 직접 해보기로 결정했습니다. 요약해서 여러분에게 도움이 되기를 바랍니다.

먼저 이 효과의 알고리즘을 중국어로 작성합니다.
1. 별 효과를 얻기 위해 배경 이미지의 위치 전환을 사용합니다. 2. 전체 효과의 가장 중요한 부분은 "3레이어 이론"입니다. 전체 효과는 3개의 레이어(빈 레이어, 분수 레이어, 점수가 있는 레이어)로 구분됩니다. 세 레이어의 레이아웃은 상대적인 레이아웃을 피하기 위해 절대적입니다. ul 자체(물론 p로도 같은 효과를 얻을 수 있습니다)
3. 빈 레이어링은 배경 이미지의 "빈 별"을 배경으로 사용하고 가로로 타일링하는 것입니다.
4. 분수 레이어의 너비는 (fraction * picture Width)와 동일하며 배경 이미지의 "프랙탈 별(예시에서는 노란색)"을 배경으로 사용하여 가로로 타일링합니다. 5. 별 5개 위치에 빈 링크(너비가 배경 이미지와 일치해야 함), 5개 a:hover의 배경을 "별 등급(여기서는 녹색)"으로 설정하고, 너비를 별 수 * 그림 너비로 설정하고, 왼쪽에서 0(왼쪽, a와 결합: 채점 효과는 다른 호버 폭으로 나타날 수 있음), 수직 좌표는 a의 수직 좌표보다 작습니다(현재 a:hover가 다른 링크를 차단하지 않도록 하기 위해). );