1. エフェクトHTMLを送信する <div id="送信ボタン"> <ボタン> // これはSVG送信用のプレースホルダーです </ボタン> </div> CS #送信ボタン{ ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの中央揃え: 中央; 高さ:100vh; } ボタン { 背景: #5f55af; 境界線: 0; 境界線の半径: 5px; パディング: 10px 30px 10px 20px; 色: 白; テキスト変換:大文字; フォントの太さ: 太字; } ボタン svg { 表示: インラインブロック; 垂直位置合わせ: 中央; 右パディング: 5px; } ボタン:ホバー svg { アニメーション: fly 2s ease 1; } @keyframes フライ { 0% { 変換: translateX(0%); } 50% { 変換: translateX(300%); } 100% { 変換: translateX(0); } } 画像 2. ネオン効果 HTML <div id="ネオン-btn"> <button class="btn one">マウスオーバー</button> <button class="btn two">マウスオーバー</button> <button class="btn three">マウスオーバー</button> </div> CS #ネオンボタン{ ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの両端揃え: スペースを空ける; 高さ:100vh; 背景: #031628; } .btn{ 境界線: 1px 実線; 背景色: 透明; テキスト変換:大文字; フォントサイズ: 14px; パディング: 10px 20px; フォントの太さ: 300; } 。1つ { 色: #4cc9f0; } 。二 { 色: #f038ff; } 。三つ { 色: #b9e769; } .btn:ホバー{ 色: 白; 境界線: 0; } .one:ホバー{ 背景色: #4cc9f0; -webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1); -moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1); ボックスの影: 10px 10px 99px 6px rgba(76,201,240,1); } .two:ホバー{ 背景色: #f038ff; -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1); -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1); ボックスの影: 10px 10px 99px 6px rgba(240, 56, 255, 1); } .three:hover{ 背景色: #b9e769; -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1); -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1); ボックスの影: 10px 10px 99px 6px rgba(185, 231, 105, 1); } 画像 3. ボーダー効果 HTML <div id="境界線を描く"> <button>マウスオーバー</button> </div> CS #境界線を描く { ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの中央揃え: 中央; 高さ:100vh; } ボタン { 境界線: 0; 背景: なし; テキスト変換:大文字; 色: #4361ee; フォントの太さ: 太字; 位置: 相対的; アウトライン: なし; パディング: 10px 20px; ボックスのサイズ: 境界線ボックス; } ボタン::前、ボタン::後 { ボックスサイズ: 継承; 位置: 絶対; コンテンツ: ''; 境界線: 2px 透明実線; 幅: 0; 高さ: 0; } ボタン::after { 下部: 0; 右: 0; } ボタン::前{ 上: 0; 左: 0; } ボタン:ホバー::前、ボタン:ホバー::後 { 幅: 100%; 高さ: 100%; } ボタン:ホバー::前{ 上の境界線の色: #4361ee; 右境界線の色: #4361ee; 遷移: 幅 0.3 秒のイーズアウト、高さ 0.3 秒のイーズアウト 0.3 秒。 } ボタン:ホバー::後{ 境界線下部の色: #4361ee; 左境界線の色: #4361ee; 遷移: border-color 0s、ease-out 0.6s、width 0.3s、ease-out 0.6s、height 0.3s、ease-out 1s; } GIF効果 4.円形効果HTML <div id="circle-btn"> <div class="btn-container"> // ここに SVG 要素があります <button>Hover me</button> </div> </div> CS #丸ボタン{ ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの中央揃え: 中央; 高さ:100vh; } .btn コンテナ { 位置: 相対的; } ボタン { 境界線: 0; 境界線の半径: 50px; 色: 白; 背景: #5f55af; パディング: 15px 20px 16px 60px; テキスト変換:大文字; 背景: 線形グラデーション(右へ、#f72585 50%、#5f55af 50%); 背景サイズ: 200% 100%; 背景の位置: 右下; transition:all 2s イーズ; } svg { 背景: #f72585; パディング: 8px; 境界線の半径: 50%; 位置: 絶対; 左: 0; トップ: 0%; } ボタン:ホバー{ 背景位置: 左下; } 画像 5. 角丸効果 HTML <div id="border-btn"> <button>マウスオーバー</button> </div> CS #ボーダーボタン{ ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの中央揃え: 中央; 高さ:100vh; } ボタン { 境界線: 0; 境界線の半径: 10px; 背景: #2ec4b6; テキスト変換:大文字; 色: 白; フォントサイズ: 16px; フォントの太さ: 太字; パディング: 15px 30px; アウトライン: なし; 位置: 相対的; 遷移: 境界半径 3s; -webkit-transition: 境界の半径 3s; } ボタン:ホバー{ 右下の境界線の半径: 50px; 左上の境界線の半径: 50px; 左下の境界線の半径: 10px; 右上の境界線の半径: 10px; } 画像 6. フリーズ効果HTML <div id="frozen-btn"> <button class="green">マウスオーバー</button> <button class="purple">マウスオーバー</button> </div> CS #フリーズしたボタン{ ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの中央揃え: 中央; 高さ:100vh; } ボタン { 境界線: 0; マージン: 20px; テキスト変換:大文字; フォントサイズ: 20px; フォントの太さ: 太字; パディング: 15px 50px; 境界線の半径: 50px; 色: 白; アウトライン: なし; 位置: 相対的; } ボタン:前{ コンテンツ: ''; 表示: ブロック; 背景: linear-gradient(左へ、rgba(255, 255, 255, 0) 50%、rgba(255, 255, 255, 0.4) 50%); 背景サイズ: 210% 100%; 背景の位置: 右下; 高さ: 100%; 幅: 100%; 位置: 絶対; 上: 0; 下:0; 右:0; 左: 0; 境界線の半径: 50px; 遷移: すべて 1; -webkit-transition: すべて 1; } 。緑 { 背景画像: 線形グラデーション(右、#25aae1、#40e495); ボックスシャドウ: 0 4px 15px 0 rgba(49, 196, 190, 0.75); } 。紫 { 背景画像: 線形グラデーション(右、#6253e1、#852D91); ボックスの影: 0 4px 15px 0 rgba(236, 116, 149, 0.75); } .purple:hover:before { 背景位置: 左下; } .green:hover:before { 背景位置: 左下; } 画像 7. 光沢のある効果の HTML <div id="光沢のある影"> <button><span>マウスオーバー</span></button> </div> CS #光沢のある影 { ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの中央揃え: 中央; 高さ:100vh; 背景: #1c2541; } ボタン { 境界線: 2px の白実線; 背景: 透明; テキスト変換:大文字; 色: 白; パディング: 15px 50px; アウトライン: なし; オーバーフロー: 非表示; 位置: 相対的; } スパン { zインデックス: 20; } ボタン:後{ コンテンツ: ''; 表示: ブロック; 位置: 絶対; 上: -36px; 左: -100px; 背景: 白; 幅: 50px; 高さ: 125px; 不透明度: 20%; 変換: 回転(-45度); } ボタン:ホバー:後{ 左: 120%; 遷移: すべて 600ms cubic-bezier(0.3, 1, 0.2, 1); -webkit-transition: すべて 600ms cubic-bezier(0.3, 1, 0.2, 1); } 画像 8. 読み込みエフェクトHTML <div id="読み込み中" > <button><span>マウスオーバー</span></button> </div> CS #読み込みボタン{ ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの中央揃え: 中央; 高さ:100vh; } ボタン { 背景: 透明; 境界線: 0; 境界線の半径: 0; テキスト変換:大文字; フォントの太さ: 太字; フォントサイズ: 20px; パディング: 15px 50px; 位置: 相対的; } ボタン:前{ 遷移: すべて 0.8 秒 cubic-bezier(0.7, -0.5, 0.2, 2); コンテンツ: ''; 幅: 1%; 高さ: 100%; 背景: #ff5964; 位置: 絶対; 上: 0; 左: 0; } ボタンスパン{ ミックスブレンドモード: 暗くする; } ボタン:ホバー:前{ 背景: #ff5964; 幅: 100%; } 画像 要約する ページボタンを目立たせるには 目を引く CSS HOVER エフェクト 8 個とサンプル コードについての記事はこれで終わりです。CSS HOVER エフェクトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: ウェブデザインにおけるインタラクション: ページングの問題に関する簡単な説明
<br />まず最初に、私はこのグループの中では完全な新人だということを述べなければなり...
中国語ドキュメント: https://router.vuejs.org/zh/ Vue Router...
この記事の例では、ログインと登録の効果を実現するためのvueプロジェクトの具体的なコードを共有してい...
目次1. 共通機能分類1.1 単一行関数: 1.2 グループ化機能: 2. 単一行関数3. 数学関数...
Linux col コマンドLinux の col コマンドは制御文字をフィルタリングするために使用...
Web フロントエンド開発のプロセスでは、UI デザイナーはグラデーション テキストを使用したデザイ...
ネットサーフィンをしていると、私の注意を引こうとする美しいグラフィックでいっぱいの Web サイトを...
解決策は2つあります。 1つはCSSで、background-size:coverを使用して画像の伸...
コンテナはすでに作成されていますが、その起動パラメータ(データがマウントされる場所)を知る方法 #コ...
序文この記事では、Linux で Squid プロキシ サーバーを設定することに関する関連コンテンツ...
UI コンポーネントを作成するときに、アニメーションを考慮しなければ、アニメーションを実現するのは非...
解決プロセス:方法1: CentOS7.3 のデフォルトのカーネル バージョンは低く、3.10.0-...
目次1. 動詞-if 2. <template> で v-if を使用する3. キーを使...
概要私は 1 年以上 Docker を使用しています。最近、サービスをすばやくオーケストレーションし...
HTML ページ ソース コード レイアウトの概要この紹介では、Google のホームページのソー...