Jour 05 de l’auto challenge d’un petit code d’experimentation html css par jour.
Aujourd’hui pour preparer le #DAY05 ou 06 où il sera question de faire tourner sur lui meme une forme géométrique, une image ou un texte au scroll de la page j’aimerais d’abords réaliser une forme géométrique simple qui tourne sur elle même en pure css.
Ça nous rappellera les 40 cercles tournant à vitesses différentes du DAY02
Pour plus de fun la rotation de ce demi cercle pourrait s’accélérer ou s’arrêter au passage de la souris (mousse hover)
Pour réaliser on utilisera la fonction border-radius() et transform: rotate()
voir le rendu : quentinrenaux.com/xp/1day1code/rotate-demicercle
Les plus:
- le cercle tourne en 4secondes,
- un léger dégradé en background avec la function: linear-gradient()
- mon site préféré pour faire mes selections de couleurs, rapide : htmlcolorcodes.com/fr/