html5およびcss3の動的バブルボタンの実装-H5 チュートリアル-php.cn

html5およびcss3の動的バブルボタンの実装

不言

リリース： 2018-06-12 13:41:36

オリジナル

3433 人が閲覧しました

私たちは、JavaScript を使用せずに、CSS3 の複数の背景とアニメーションの力を利用して便利なアニメーションボタンのセットを作成しています。このボタンパックを使用すると、クラス名を指定するだけで、Web ページ上のリンクを簡単にアニメーションボタンに変えることができます。必要な方は参考にしてください

今回は、CSS3の複数の背景とアニメーションの力を利用して、便利なアニメーションボタンのセットを作成しています。このボタンパックを使用すると、クラス名を指定するだけで、Web ページ上のリンクをアニメーション化されたボタンに簡単に変えることができます。 JavaScriptは必要ありません。追加のクラス名を割り当てることで、4 つのカラーテーマと 3 つのサイズも使用できます。
Web ページ上の通常のリンクを派手なアニメーション CSS3 ボタンに変えるには、ボタンのクラスとサポートされている色の 1 つを指定するだけです。以下の例を参照してください:

<a href="#" class="button blue big">Download</a> 
<a href="#" class="button blue medium">Submit</a> 
<a href="#" class="button small blue rounded">Submit</a>

ログイン後にコピー

には、青、緑、オレンジ、グレーの 4 つのカラークラスがあります。上記のリンクに割り当てられている残りのクラスはオプションです。サイズは小、中、大から選択できます。また、より丸いバージョンのボタンを作成する [Rounded] という 1 つのカテゴリから選択できます。
効果のデモ
効果を表示するには、Chrome や Firefox などの標準ブラウザを使用することをお勧めします。IE 9 でもいくつかの非互換性があります。

すべてのアニメーション化されたボタンの CSS コードは、buttons.css にあります。これにより、既存のプロジェクトに簡単にドロップして使用できるようになります。
以下のコード全体で、いくつかの場所で同じプロパティの 2 つのバージョンを定義していることに注意してください。これは、ブラウザが CSS 定義を処理する方法に関係しています。彼らはルールを 1 つずつ解析して適用し、理解できないものは無視します。このようにして、すべてのルール (バニラバージョン) と、古いルールを無視する CSS3 対応バージョンを理解することができます。
最初に行う必要があるのは、ボタンクラスを定義することです。これは、位置、フォント、背景スタイルを適用するボタンのバックボーンです。
最初はフォントに関するスタイルで、その後に次のようにプロパティが表示されます。これはインラインブロックとして設定され、周囲のテキストと同じ行に配置できます (インライン要素のように) が、パディングとマージンを備えたアスペクトブロックのようにもなります。
ある時点で、各ボタンに 4 つの背景画像が適用されていることがわかります。恐ろしいように思えますが、実際にサーバーから要求されるのは 1 つのファイルだけです。最初の 2 つの背景、下の図に示す左下と右上の部分的なバブル画像、および他の 2 つは純粋な CSS グラデーションです。
上で述べたように、バブルの背景は背景の位置プロパティによってオフセットされた 2 つの別々の画像として表示されます。 CSS3 トランジションプロパティを使用して、スライドの上部または下部に両方のバージョンの背景画像が表示されるアニメーションを定義し、ボタンがホバーされたときにバブル効果を作成しました。

/* BlueButton */ 
.blue.button{ 
color:#0f4b6d !important; 
border:1px solid #84acc3 !important; 
/* A fallback background color */ 
background-color: #48b5f2; 
/* Specifying a version with gradients according to */ 
background-image: url('button_bg.png'), url('button_bg.png'), 
-moz-radial-gradient( center bottom, circle, 
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), 
-moz-linear-gradient(#4fbbf7, #3faeeb); 
background-image: url('button_bg.png'), url('button_bg.png'), 
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, 
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))), 
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); 
} 
.blue.button:hover{ 
background-color:#63c7fe; 
background-image: url('button_bg.png'), url('button_bg.png'), 
-moz-radial-gradient( center bottom, circle, 
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), 
-moz-linear-gradient(#63c7fe, #58bef7); 
background-image: url('button_bg.png'), url('button_bg.png'), 
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, 
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), 
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); 
}

ログイン後にコピー

各カラークラスは、ボタンのテキストラベル、テキストシャドウ、背景画像の色など、一意のプロパティのセットを定義します。複数の画像を追加するために [Background] プロパティボタンを使用したことに注目してください。これらは階層の最上位にあり、最初に表示され、上で定義されます。
現在 CSS グラデーションをサポートしているのは Mozilla と Webkit ブラウザのみですが、構文はまったく異なります。残りのブラウザには代替背景色が表示されます。グラデーションルールの無料版にはプレフィックスが含まれていないことに気づいたかもしれません。これは、グラデーションがまだ正式に CSS 仕様の一部ではなく、推奨される構文プロトコルがないという事実によるものです。
上記のスニペットでは、線形グラデーションとその上に放射状グラデーションを定義したことがわかります。 WebKit と Mozilla の構文でグラデーションをよりスムーズにブレンドするために、RGBA ラジアルの 1 つを定義し、グラデーションの外側の色を完全に透明にします。
これで、CSS3アニメーションバブルボタンが完成しました。
概要
これらのボタンは完全に CSS に基づいており、統合は非常に簡単です。ボタンフォルダーをプロジェクトのどこかにドロップするだけです。 CSS ファイルを変更することで、独自の色や形を作成できます。

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