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

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

May 16, 2016 pm 12:06 PM
css 总结 效果 nombre d'étoiles joli

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 ;

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

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 );

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
4 Il y a quelques semaines By DDD
Musée à deux points: toutes les expositions et où les trouver
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment jouer des séquences d'image en douceur avec l'animation CSS? Comment jouer des séquences d'image en douceur avec l'animation CSS? Apr 04, 2025 pm 05:57 PM

Comment réaliser la lecture de photos comme des vidéos? Plusieurs fois, nous devons implémenter des fonctions de lecteur vidéo similaires, mais le contenu de lecture est une séquence d'images. direct...

Comment vous assurez-vous que certaines opérations ne sont effectuées qu'une seule fois lors de l'utilisation du crochet UseEffecte dans l'application de React.tsx? Comment vous assurez-vous que certaines opérations ne sont effectuées qu'une seule fois lors de l'utilisation du crochet UseEffecte dans l'application de React.tsx? Apr 04, 2025 pm 06:33 PM

Dans les projets React, nous rencontrons souvent des problèmes avec l'utilisation des fonctions de cycle de vie, en particulier en ce qui concerne la rafraîchissement de la page, comment garantir que certaines opérations uniquement ...

La largeur des espaces EMSP en HTML est incohérente. Comment implémenter de manière fiable l'indentation de texte? La largeur des espaces EMSP en HTML est incohérente. Comment implémenter de manière fiable l'indentation de texte? Apr 04, 2025 pm 11:57 PM

En ce qui concerne le problème de la largeur incohérente des espaces EMSP dans les caractères HTML et chinois dans de nombreux tutoriels Web, il est mentionné que l'occupation de la largeur d'un caractère chinois, mais la situation réelle n'est pas ...

Comment utiliser Vue 3 pour implémenter la fonction de chargement de défilement similaire aux enregistrements de chat WeChat? Comment utiliser Vue 3 pour implémenter la fonction de chargement de défilement similaire aux enregistrements de chat WeChat? Apr 04, 2025 pm 03:51 PM

Comment atteindre le chargement de défilement vers le haut similaire aux enregistrements de chat WeChat? Lors du développement d'applications similaires aux enregistrements de chat WeChat, une question courante est de savoir comment ...

Comment utiliser CSS pour obtenir l'effet de lecture en douceur des séquences d'images? Comment utiliser CSS pour obtenir l'effet de lecture en douceur des séquences d'images? Apr 04, 2025 pm 04:57 PM

Comment réaliser la fonction de jouer des images comme des vidéos? Plusieurs fois, nous devons réaliser des effets de lecture vidéo similaires dans l'application, mais le contenu de lecture n'est pas ...

Comment implémenter une animation de transition serrée dans React à l'aide du groupe React-Transition? Comment implémenter une animation de transition serrée dans React à l'aide du groupe React-Transition? Apr 04, 2025 pm 11:27 PM

L'utilisation du groupe React-Transition dans React pour réagir à la confusion quant à la suite d'animations de transition. Dans React Projects, de nombreux développeurs choisiront d'utiliser la bibliothèque de groupes React-Transition pour ...

【Rust AutoDud】 Introduction 【Rust AutoDud】 Introduction Apr 04, 2025 am 08:03 AM

1.0.1 Préface Ce projet (y compris le code et les commentaires) a été enregistré pendant ma rouille autodidacte. Il peut y avoir des déclarations inexactes ou peu claires, veuillez vous excuser. Si vous en profitez, c'est encore mieux. 1.0.2 Pourquoi Rustrust est-il fiable et efficace? La rouille peut remplacer C et C, par des performances similaires mais une sécurité plus élevée, et ne nécessite pas de recompilation fréquente pour vérifier les erreurs comme C et C. Les principaux avantages incluent: la sécurité de la mémoire (empêcher les pointeurs nuls de déréférences, les pointeurs pendants et la contention des données). Filetage (assurez-vous que le code multithread est sûr avant l'exécution). Évitez le comportement non défini (par exemple, le tableau hors limites, les variables non initialisées ou l'accès à la mémoire libérée). Rust offre des fonctionnalités de langue moderne telles que les génériques

Comment construire rapidement une page de premier plan dans un projet React Vite à l'aide d'outils AI? Comment construire rapidement une page de premier plan dans un projet React Vite à l'aide d'outils AI? Apr 04, 2025 pm 01:45 PM

Comment construire rapidement une page frontale en développement back-end? En tant que développeur backend avec trois ou quatre ans d'expérience, il a maîtrisé le JavaScript de base, CSS et HTML ...

See all articles