Très belle page de résumé de l'effet étoile CSS 1/2_Echange d'expérience

L'utilisation de CSS pur pour créer des effets de notation par étoiles est de plus en plus utilisée dans les RIA en ligne. En combinaison avec ajax et d'autres technologies, elle peut produire d'excellents effets visuels et une excellente expérience utilisateur. Avant le début de cet article, vous pouvez vous rendre sur cssheaven pour en faire l'expérience. d'abord.

Récemment, en raison des besoins du projet, j'ai trouvé beaucoup d'exemples et d'explications sur les notes CSS par étoiles sur Internet, mais j'ai découvert que la plupart d'entre eux étaient des articles étrangers traduits et que les explications n'étaient pas très claires, alors j'ai j'ai décidé de le faire moi-même. Laissez-moi faire un résumé et j'espère qu'il pourra vous aider.

Écrivez d'abord l'algorithme de cet effet en chinois :
1. Utilisez le changement de position de l'image d'arrière-plan pour obtenir l'effet étoile ;



2. La partie la plus critique de l'ensemble de l'effet est la « théorie des trois couches ». L'effet entier est divisé en trois couches : couche vide, couche fractionnée et couche marquée. La disposition des trois couches est absolue pour éviter la disposition relative. de ul lui-même (Bien sûr, vous pouvez également obtenir le même effet avec p);
3. La superposition vide consiste à utiliser "l'étoile vide" dans l'image d'arrière-plan comme arrière-plan et à la mosaïquer horizontalement
4. La largeur du calque fractionnaire est égale à (fraction * largeur de l'image), et utilisez "l'étoile fractale (jaune dans l'exemple)" dans l'image d'arrière-plan comme arrière-plan pour carreler horizontalement
5. liens vides aux positions de 5 étoiles (la largeur doit correspondre à l'image d'arrière-plan) et définissez l'arrière-plan des cinq a: survolez "évaluer les étoiles (vert ici)", définissez la largeur sur le nombre d'étoiles * largeur de l'image, et gauche à 0 (à gauche, combiné avec a : l'effet de notation peut apparaître avec différentes largeurs de survol), et la coordonnée verticale est plus petite que la coordonnée verticale de a (pour garantir que le a:hover actuel ne bloquera pas d'autres liens );