Chargement…
Effet Cercle Sur Image

Créer Un Effet Cercle Sur Image en CSS3



Avec CSS3 on peut créer plusieurs animations sur images sans utiliser Flash ou Photoshop. Dans ce tutoriel, je vais vous montrez comment créer un effet cercle sur image en CSS3. Pour avoir cet effet Rond sur une photo on va modeler le Photo puis au passage de la souris, l’image se transforme ou donne l’impression de changer de forme en un Cercle.

Créer Un Effet Cercle Sur Image

Avant de commencer, créez un dossier « Effet-Cercle ». Puis avec votre Notepad++ ( ou n’importe quel autre logiciel que vous utilisez) créez les fichiers suivant : index.html, style.css et une image (200x200px) pour faire la démonstration.

dossier et fichiers animation

Dans notre animation on passera de la forme Carré à Cercle et cela on utilisant une transition 1s (une seconde) pour la transformation et un effet radius de 50% pour avoir un cercle.

effet normale

effet cercle

Notre HTML

Collez ce code dans le fichier : index.html

class= »effetcercle img » : Dans notre DIV on utilise deux Class, une pour notre effet qui se suit avec une autre pour notre image.

Collez ce code dans le fichier : style.css

On donne une largeur et une hauteur de 200px à l’image, des bordures GRAS de 10px, un effet Radius de 15px pour avoir un effet de Bords Lisses et pour le passage de la souris on utilise cursor: pointer;

Pour l’effet cercle on utilise la Transition CSS3. Pour cette Class on doit spécifier les propriétés de chaque Navigateur (-webkit, -moz, -ms, -o) et une valeur d’une seconde pour tous les navigateurs :

Pour vous donnez une idée sur la Transitions CSS3, le syntaxe général est comme suit :

[transition-property] est utilisé pour spécifier le style (Background, Width, Padding…) que vous voulez utiliser ou les propriétés à sélectionner pour l’effet de transition.
[transition-duration] est utilisé pour la vitesse de l’animation ou de la transition. Dans notre exemple on utilise 1s (une seconde).
[transition-timing-function] va déterminer et calculer la vitesse de la transition. Pour plus d’informations, veuillez voir ce Lien.

Si cet article vous a plu alors n’hésitez pas à le partager avec vos amis(es), et suivez nous sur Facebook, Twitter et Google+ Pour recevoir des notifications de tous Nos nouveaux tutoriaux et conseils.



Laisser un commentaire