Créez un bouton rotatif qui change de couleur à l'aide de CSS3

Cet article présente principalement l'utilisation de CSS3 pour créer un bouton rotatif qui change de couleur. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Vous voulez diriger les visiteurs. vers une autre page ? Ajouter un bouton sympa est un bon moyen ! L'article d'aujourd'hui propose comment utiliser CSS3 pour créer un bouton rotatif, rotatif et changeant de couleur. Les amis qui ont besoin d'en savoir plus peuvent s'y référer

Vous voulez. pour diriger les visiteurs vers une autre page ? Ajouter un bouton sympa est un excellent moyen de le faire ! L'article d'aujourd'hui propose comment utiliser CSS3 pour créer un bouton rotatif, rotatif et changeant de couleur.
Il s'agit d'un bouton CSS3 qui montre la rotation. Commençons par HTML :

<p> 
<a class="button">旋转按钮</a> 
</p>

et maintenant CSS :

.button 
{ 
background:#aaa; 
color:#555; 
font-weight:bold; 
font-size:15px; 
padding:10px 15px; 
border:none; 
margin:50px; 
cursor:pointer; 
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; 
-o-transition-property:width,height,-o-transform,background,font-size,opacity,color; 
-o-transition-duration:1s,1s,1s,1s,1s,1s,1s; 
-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color; 
-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s; 
transition-property:width,height,transform,background,font-size,opacity; 
transition-duration:1s,1s,1s,1s,1s,1s; 
-webkit-border-radius:5px; 
border-radius:5px; 
box-shadow:0 0 2px rgba(0,0,0,0.5); 
text-shadow:0 0 5px rgba(255,255,255,0.5); 
display:inline-block; /*它是重要为按钮旋转*/ 
}

Voici l'attribut de conversion de code clé, qui peut être défini par la largeur, la hauteur, l'arrière-plan , couleur, transparence, etc. Dans cet exemple, la propriété change toutes les secondes, en fonction de la propriété de temps de transition.
transition : opacité 2s en douceur, arrière-plan 1s linéaire, largeur 1s, hauteur 1s, taille de police 1s
Ensuite, utilisez ce code pour déclencher l'effet de rotation en survolant l'élément

.button:hover 
{ 
-moz-transform: rotate(360deg); 
-webkit-transform: rotate(360deg); 
-o-transform: rotate(360deg); 
transform: rotate(360deg); 
background:#99A411; 
font-size:30px; 
color:#fff; 
}

Le bouton convertit l'élément pour qu'il pivote de 360 ​​​​degrés, un cercle complet. Le reste du code modifie la couleur et la taille de la police.

Amusez-vous avec celui-ci. Peut-être pourriez-vous le rendre utile avec des boutons de vacances amusants. Peut-être pourriez-vous même le mettre à niveau pour faire pivoter un bouton et changer l'image de l'une à l'autre. Qui sait ? Les possibilités sont infinies

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tous. Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois !

Recommandations associées :

CSS pour obtenir l'effet du texte entourant les images

Comment utiliser CSS3 pour implémenter une circulaire barre de progression

Utilisez CSS3 pour écrire des filtres en niveaux de gris afin de créer des effets photo en noir et blanc

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!