とても美しいCSSスターエフェクトまとめページ1/2_体験交流

純粋な CSS を使用して星評価効果を作成することは、オンライン RIA でますます使用されています。Ajax やその他のテクノロジと組み合わせることで、優れた視覚効果と優れたユーザー エクスペリエンスをレンダリングできます。この記事を始める前に、csheaven にアクセスして体験してください。初め。

最近プロジェクトの必要があり、CSS のスター評価の例や説明をインターネットでたくさん探しましたが、ほとんどが海外の記事を翻訳したもので、説明があまり明確ではなかったので、自分なりにまとめてみることにしましたので、少しでもお役に立てれば幸いです。

まず、この効果のアルゴリズムを中国語で書きます:
1. 背景画像の位置切り替えを使用して、星の効果を取得します。


2. エフェクト全体の最も重要な部分は「3 レイヤー理論」です。エフェクト全体は空のレイヤー、フラクショナル レイヤー、スコア レイヤーの 3 つのレイヤーに分割されます。3 つのレイヤーのレイアウトは絶対的です。 UL 自体が自動的にバンドの相対的なレイアウトにならないようにするため (もちろん、同じ効果を得るために p を使用することもできます);
3. 空のレイヤー化では、背景画像の「空の星」を背景として使用します。
4. 分割レイヤー化 幅は(スコア×画像幅)で、背景画像の「スコアスター(例では黄色)」が背景として使用されます。
5. 空のリンクを5つ並べて並べる 5つの星の位置に配置し（幅は背景画像と一致する必要があります）、5つのa:hoverの背景を「スコアリングスター（ここでは緑)」、幅を星の数 * 画像の幅に設定し、左に 0 (a:hover のさまざまな幅と組み合わせたときにスコアリング効果が表示されるように左) に設定すると、垂直座標が小さくなります。 a の垂直座標よりも大きい (現在の a:hover が他のリンクをブロックしないようにするため);