CSS3 クリック ボタンを使用して背景のグラデーション アニメーション効果を実現します
この記事では、CSS3 を使用して、ボタンをクリックしたときにボタンの背景にグラデーション アニメーションの効果を実現する方法を紹介します。実装後の効果は、この効果を使用したボタンがユーザーに与える効果が非常に優れています。とても特別な気分です。興味のある方はぜひご覧ください。
レンダリングは次のとおりです:
サンプルコードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>css3给按钮添加背景渐变动画</title>
<!--
@author：SM
@email:sm0210@qq.com
@desc：
css3给按钮添加背景渐变动画
-->
<style type="text/css">
button {
color:#FFF;
font-size:16px;
outline:none;
width:300px;
height:48px;
background:#26A1D9;
border:none;
-webkit-border-radius:5px;
border-radius:5px;
}
button:active{
outline:none;
background:#208FC1;
/*执行动画*/
-webkit-animation:showBtn 0.5s 1;
animation:showBtn 0.5s 1;
/*停止在最后一帧*/
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
/*
定义动画
*/
@-webkit-keyframes showBtn{</p>
<p>10%{
background:-webkit-radial-gradient(Circle,#1E7AA5 28%, #2287B7 30%, #2287B7 48%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 28%, #2287B7 30%, #2287B7 48%,#208FC1 60%);
}</p>
<p>20%{
background:-webkit-radial-gradient(Circle,#1E7AA5 32%, #2287B7 34%, #2287B7 52%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 32%, #2287B7 34%, #2287B7 52%,#208FC1 60%);
}</p>
<p>40%{
background:-webkit-radial-gradient(Circle,#1E7AA5 34%, #2287B7 36%, #2287B7 54%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 34%, #2287B7 36%, #2287B7 54%,#208FC1 60%);
}</p>
<p>60%{
background:-webkit-radial-gradient(Circle,#1E7AA5 36%, #2287B7 38%, #2287B7 56%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 36%, #2287B7 38%, #2287B7 56%,#208FC1 60%);
}</p>
<p>80%{
background:-webkit-radial-gradient(Circle,#1E7AA5 38%, #2287B7 40%, #2287B7 58%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 38%, #2287B7 40%, #2287B7 58%,#208FC1 60%);
}</p>
<p>100%{
background:-webkit-radial-gradient(Circle,#1E7AA5 40%, #2287B7 42%, #2287B7 60%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 40%, #2287B7 42%, #2287B7 60%,#208FC1 60%);
}
}
</style>
</head>
<body>
<button>按钮</button></p>
<p></body>
</html>以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語ネットにご注目ください。
関連する推奨事項:
繰り返し表示を避けるために CSS を使用して背景画像を引き延ばしたり塗りつぶしたりする方法
以上がCSS3 クリック ボタンを使用して背景のグラデーション アニメーション効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1666
14
1425
52
1324
25
1272
29
1251
24
Windows で配信最適化サービスを無効にする 5 つの方法
May 17, 2023 am 09:31 AM
Windows コンピューターで配信の最適化サービスを無効にする理由はさまざまです。しかし、読者からは、従うべき正しい手順がわからないという苦情が寄せられました。このガイドでは、配信の最適化サービスをいくつかの手順で無効にする方法について説明します。サービスの詳細については、「services.msc を開く方法」ガイドを参照してください。配信最適化サービスは何をするサービスですか?配信最適化サービスは、クラウド ホスティング ソリューションを備えた HTTP ダウンローダーです。これにより、Windows デバイスは Windows アップデート、アップグレード、アプリケーション、その他の大きなパッケージ ファイルを代替ソースからダウンロードできるようになります。さらに、展開内の複数のデバイスがこれらのパッケージをダウンロードできるようにすることで、帯域幅の消費を削減します。さらにウィンドさんは
iPad Mini 6を再起動、強制再起動、シャットダウンする方法
Apr 29, 2023 pm 12:19 PM
iPad Mini 6 を強制的に再起動する方法 iPad Mini 6 の強制再起動は、一連のボタンを押すことで行われ、次のように動作します。 音量を上げるには押して放します。 音量を下げるには押して放します。 が表示されるまで電源/ロック ボタンを押して放します。 iPad Mini が強制的に再起動されたことを示す Apple ロゴ これで、iPad Mini 6 が強制的に再起動されました。強制再起動は通常、iPad Mini のフリーズ、アプリのフリーズ、その他の一般的な誤動作などのトラブルシューティングの目的で使用されます。第 6 世代 iPad Mini を強制的に再起動する手順について注意すべき点は、超薄型ベゼルを備え、
書き換え後:
Windows 11でPS5コントローラーが認識されない場合の対処方法
May 09, 2023 pm 10:16 PM
<h3>PS5 コントローラーの接続について知っておくべきことは何ですか? </h3><p>DualSense コントローラーは優れていますが、コントローラーが接続されない、または検出されないという報告があります。この問題を解決する最も簡単な方法は、適切な USB ケーブルを使用してコントローラーを PC に接続することです。 </p><p>一部のゲームは、DualSense をネイティブにサポートしています。このような場合は、コントローラーを接続するだけで済みます。しかし、これにより、USB ケーブルがない場合や使いたくない場合はどうすればよいかなど、別の疑問が生じます。
![Windows 11 の電源ボタンの動作を変更する [5 つのヒント]](https://img.php.cn/upload/article/000/887/227/169600135086895.png?x-oss-process=image/resize,m_fill,h_207,w_330)
Windows 11 の電源ボタンの動作を変更する [5 つのヒント]
Sep 29, 2023 pm 11:29 PM
電源ボタンは PC をシャットダウンするだけではありませんが、これはデスクトップ ユーザーのデフォルトのアクションです。 Windows 11 で電源ボタンの動作を変更したい場合、それは思っているよりも簡単です。物理的な電源ボタンはスタート メニューのボタンとは異なるため、以下の変更はスタート メニューの操作には影響しないことに注意してください。さらに、デスクトップかラップトップかに応じて、電源オプションが若干異なります。 Windows 11 で電源ボタンの動作を変更する必要があるのはなぜですか?コンピュータをシャットダウンするよりもスリープ状態にすることが多い場合は、ハードウェア電源ボタン (つまり、PC の物理的な電源ボタン) の動作を変更すると効果があります。同じ考え方がスリープ モードや単にディスプレイをオフにする場合にも当てはまります。 Windows 11 を変更する
OneNote で画像を背景として設定する方法
May 14, 2023 am 11:16 AM
Onenote は、Microsoft が提供する最高のメモ作成ツールの 1 つです。 Onenote を Outlook や MSTeams と組み合わせると、仕事と個人の創造的な生産性を向上させるための強力な組み合わせになります。違う形式でメモを取らなければなりませんが、それは単に物事を書き留めるだけではないかもしれません。日々の仕事の中で、さまざまなソースから画像をコピーし、編集を行う必要がある場合があります。変更を適用する方法を知っていれば、Onenote に貼り付けた画像は大いに役立ちます。 Onenote を使用しているときに、Onenote に貼り付けられた画像が快適に作業できないという問題に遭遇したことはありますか?この記事では、Onenote で画像を効果的に使用する方法について説明します。我々はできる
iOS 17: メッセージ内で iMessage アプリを整理する方法
Sep 18, 2023 pm 05:25 PM
iOS 17 では、Apple はいくつかの新しいメッセージング機能を追加しただけでなく、メッセージ アプリのデザインを微調整して見た目をすっきりさせました。キーボードの上、テキスト入力フィールドの左側にある「+」ボタンをタップすることで、カメラや写真のオプションなど、すべての iMessage アプリとツールにアクセスできるようになりました。 「+」ボタンをクリックすると、デフォルトのオプション順序が記載されたメニュー列が表示されます。上から順に、カメラ、写真、ステッカー、現金 (利用可能な場合)、オーディオ、位置情報があります。一番下には「その他」ボタンがあり、これをタップすると、インストールされている他のメッセージング アプリが表示されます (上にスワイプして、この非表示のリストを表示することもできます)。 iMessage アプリを再編成する方法 以下で実行できます
Xbox シリーズ S または X コントローラーをリセットする方法
Jun 03, 2023 pm 08:19 PM
Xbox ゲーム コンソールはゲーマーの間で人気があります。新しい SeriesX と SeriesS では、ゲームはまるで本物のような体験になります。 Xbox コントローラーは、ゲーム効果を体験するための主要なツールです。コントローラーをメインコンソールに接続しようとすると、コントローラーの接続が切断されたり、エラーが発生したりすることがあります。これは、ペアリングに関連するさまざまな問題が原因である可能性があります。これは、いくつかの簡単な手順で解決できます。 Xbox Series S または Xbox Series X コントローラーをリセットする ステップ 1: コントローラーの Xbox ボタンを数秒間押し続けて、コントローラーの電源をオフにします。ステップ 2: 画面で、「コントローラーの電源を切る」に移動し、ボタン A を押してオプションを選択します。注: X を押し続けると、
Vue を使用してボタンのカウントダウン効果を実装する方法
Sep 21, 2023 pm 02:03 PM
Vue を使用してボタンのカウントダウン効果を実装する方法 Web アプリケーションの人気が高まるにつれて、ユーザーがページを操作するときのユーザー エクスペリエンスを向上させるために、動的効果を使用する必要がよくあります。その中でもボタンのカウントダウンエフェクトは非常に一般的で実用的なエフェクトです。この記事では、Vue フレームワークを使用してボタンのカウントダウン効果を実装する方法と、具体的なコード例を紹介します。まず、ボタンとカウントダウン関数を含む Vue コンポーネントを作成する必要があります。 Vue では、コンポーネントは再利用可能な Vue インスタンスであり、ビューは
