CSS3を使用して色が変わる回転ボタンを作成する-CSSチュートリアル-php.cn

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

不言

リリース： 2018-07-02 10:17:01

オリジナル

1890 人が閲覧しました

この記事では、主に 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 サイトをご覧ください。