Very beautiful CSS star effect summary page 1/2

Source: Internet
Author: User

Creating star rating effects with pure CSS is increasingly used in the network Ria. Combined with Ajax and other technologies, it can render Excellent visual effects and excellent user experience. In this article ArticleBefore getting started, you can try cssheaven first.

Recently, due to project requirements, I have found many examples and descriptions of CSS star rating on the Internet, but I found that most of them are translated from foreign articles, and the explanation is not very clear, so I decided to make a summary by myself and hope to help you.

First, write this effect in Chinese.Algorithm:
1. Use the location switch of the background image to get the star effect;

2. the most important part of the overall effect is the "three-layer theory". The whole effect is divided into three layers: The air separation layer, the score layer, and the score layer. The three layers are all in absolute, to avoid the relative layout of UL itself (of course, div can also achieve the same effect );
3. the blank layer uses the "Empty Star" in the background image as the background and tiled horizontally;
4. The width of the score layer is equal to the value (score * image width), and the "score Star (yellow in this example)" in the background image is used as the horizontal Tile of the background;
5. in the scoring layer, five blank links are placed at the positions of five stars (the width must be consistent with the background image), and five: hover's background is set to "score Star (green here)", width is set to number of stars * image width, left is 0 (left, combined with: if the width of hover is different, the score is displayed. The vertical coordinate is smaller than the vertical coordinate of A (to ensure that the current A: hover does not block other links );

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.