CSS3を使用して色が変わる回転ボタンを作成する

この記事では、主に CSS3 を使用して色を変更するボタンを作成する方法を紹介します。必要な場合は、それを参照してください。 1 つはとてもクールなボタンです。今日の記事では、CSS3 を使用して回転、回転、色を変更するボタンを作成する方法を提案します。詳細を知りたい人は、それを参照してください。ページにクールなボタンを追加します 素晴らしいアイデアですね! 今日の記事では、CSS3 を使用して、回転して色が変わるボタンを作成する方法を提案します。

これは回転を示す CSS3 ボタンです。まずは HTML:

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

、次に 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; /*它是重要为按钮旋转*/ 
}

ここで重要なコードは、幅、高さ、背景、色、透明度などで定義できる変換プロパティです。この例では、プロパティは遷移時間プロパティに従って 1 秒ごとに変化します。

トランジション: 不透明度 2 秒、イーズアウト 1 秒、線形背景 1 秒、幅 1 秒、高さ 1 秒、フォントサイズ 1 秒
次に、このコードを使用して要素を円で囲んで回転効果をトリガーします

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

要素を 360 度回転するように変換します。度ボタン、完全な円。コードの残りの部分では、色とフォント サイズを変更します。
楽しんでプレイしてください。楽しいホリデーボタンを追加すると便利になるかもしれません。おそらく、ボタンを回転させて画像を別の画像に変更できるようにアップグレードすることもできるでしょう。可能性は無限です

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

画像を囲むテキストの効果を実現する CSS

CSS3 を使用して円形のプログレス バーを実装する方法

CSS3 を使用してグレースケール フィルターを記述して白黒を作成する写真効果

以上がCSS3を使用して色が変わる回転ボタンを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。