ハートの属性 不透明度: .999 は要素のスタッキングコンテキストを作成し、ボタン6と8のアニメーションが背景に隠れないようにします。 left/top: -1px は疑似要素をボタンの位置と一致させます。理由は次のとおりです。 transition-delay 水平および垂直の境界アニメーションは微妙な遅延効果を生み出します z-index: -1 は、アニメーションによって生成されたカラーブロックがボタンのテキストを覆わないようにします。 左/上/右/下が設定された絶対要素は、親要素のパディング ボックスを基準に配置されるため、ここでの疑似要素は、ボタンの位置と一致するように境界距離を移動する必要があります。そうしないと、次の効果が発生します。 緑の境界線と灰色の境界線の間に1ピクセルの距離があることがわかります。 <div class="メインコンテナ"> <セクション> <button class="btn btn-green btn-border-o">ボタン 1</button> <button class="btn btn-blue btn-border">ボタン 2</button> <button class="btn btn-purple btn-border-rev-o">ボタン 3</button> <button class="btn btn-navy btn-border-rev">ボタン 4</button> </セクション> <セクション> <button class="btn btn-orange btn-fill-vert-o">ボタン 5</button> <button class="btn btn-red btn-fill-vert">ボタン 6</button> <button class="btn btn-green btn-fill-horz-o">ボタン 7</button> <button class="btn btn-blue btn-fill-horz">ボタン 8</button> </セクション> </div> *、*:前、*:後 { 遷移: すべて 0.3 秒; } セクション { 位置: 相対的; パディング: 5px 0 5px; テキスト配置: 中央; } .btn{ 位置: 相対的; 表示: インラインブロック; 行の高さ: 35px; マージン: 8px; パディング: 0 15px; フォントサイズ: 15px; 境界線の半径: 3px; 不透明度: .999; カーソル: ポインタ; } .btn-border-o { 背景色: 透明; 境界線: 1px 実線 #d0d0d0; 色: #B8B8B8; } .btn-border-o:before、.btn-border-o:after { コンテンツ: ''; 位置: 絶対; 境界線のスタイル: solid; 境界線の半径: 3px; ボックスのサイズ: コンテンツボックス; } .btn-border-o:before { 左: 0; 上: -1px; 幅: 0; 高さ: 100%; 境界線の幅: 1px 0 1px 0; 遷移遅延: 0.05秒; } .btn-border-o:after { 上: 0; 左: -1px; 幅: 100%; 高さ: 0; 境界線の幅: 0 1px 0 1px; } .btn-border-o:hover:before { 幅: 100%; } .btn-border-o:hover:after { 高さ: 100%; } .btn-border-o.btn-green:before、.btn-border-o.btn-green:after { 境界線の色: #2ecc71; } .btn-border-o.btn-green:hover { 色: #2ecc71; } .btn-border { 背景色: #e5e5e5; 境界線: 1px 実線 #e5e5e5; 色: #a6a6a6; } .btn-border:before、.btn-border:after { 位置: 絶対; コンテンツ: ''; 境界線のスタイル: solid; 境界線の半径: 3px; ボックスのサイズ: コンテンツボックス; } .btn-border:before { 上: -1px; 左: 0; 幅: 0; 高さ: 100%; 境界線の幅: 1px 0 1px 0; 遷移遅延: 0.05秒; } .btn-border:after { 上: 0; 左: -1px; 幅: 100%; 高さ: 0; 境界線の幅: 0 1px 0 1px; } .btn-border:hover { 背景色: 透明; } .btn-border:hover:before { 幅: 100%; } .btn-border:hover:after { 高さ: 100%; } .btn-border.btn-blue:before、.btn-border.btn-blue:after { 境界線の色: #3498db; } .btn-border.btn-blue:hover { 色: #3498db; } .btn-border-rev-o { 背景色: 透明; 境界線: 1px 実線 #d0d0d0; 色: #B8B8B8; } .btn-border-rev-o:before、.btn-border-rev-o:after { コンテンツ: ''; 位置: 絶対; 境界線のスタイル: solid; 境界線の半径: 3px; ボックスのサイズ: コンテンツボックス; } .btn-border-rev-o:before { 上: -1px; 右: 0; 幅: 0; 高さ: 100%; 境界線の幅: 1px 0 1px 0; 遷移遅延: 0.05秒; } .btn-border-rev-o:after { 左: -1px; 下部: 0; 幅: 100%; 高さ: 0; 境界線の幅: 0 1px 0 1px; } .btn-border-rev-o:hover:before { 幅: 100%; } .btn-border-rev-o:hover:after { 高さ: 100%; } .btn-border-rev-o.btn-purple:before、.btn-border-rev-o.btn-purple:after { 境界線の色: #9b59b6; } .btn-border-rev-o.btn-purple:hover { 色: #9b59b6; } .btn-border-rev { 背景色: #e5e5e5; 境界線: 1px 実線 #e5e5e5; 色: #a6a6a6; } .btn-border-rev:before、.btn-border-rev:after { コンテンツ: ''; 位置: 絶対; 境界線のスタイル: solid; 境界線の半径: 3px; ボックスのサイズ: コンテンツボックス; } .btn-border-rev:before { 上: -1px; 右: 0; 幅: 0; 高さ: 100%; 境界線の幅: 1px 0 1px 0; } .btn-border-rev:after { 下部: 0; 左: -1px; 幅: 100%; 高さ: 0; 境界線の幅: 0 1px 0 1px; 遷移遅延: 0.05秒; } .btn-border-rev:hover { 背景色: 透明; } .btn-border-rev:hover:before { 幅: 100%; } .btn-border-rev:hover:after { 高さ: 100%; } .btn-border-rev.btn-navy:before、.btn-border-rev.btn-navy:after { 境界線の色: #34495e; } .btn-border-rev.btn-navy:hover { 色: #34495e; } .btn-fill-vert-o { 背景色: 透明; 境界線: 1px 実線 #d0d0d0; 色: #B8B8B8; オーバーフロー: 非表示; } .btn-fill-vert-o:before、.btn-fill-vert-o:after { コンテンツ: ''; 位置: 絶対; 左: 0; 幅: 100%; 高さ: 0; 不透明度: 0; Zインデックス: -1; } .btn-fill-vert-o:before { 上位: 50%; } .btn-fill-vert-o:after { 下部: 50%; } .btn-fill-vert-o:hover { 色: #fff; } .btn-fill-vert-o:hover:before、.btn-fill-vert-o:hover:after { 高さ: 50%; 不透明度: 1; } .btn-fill-vert-o.btn-orange:before、.btn-fill-vert-o.btn-orange:after { 背景色: #e67e22; } .btn-fill-vert-o.btn-orange:hover { 境界線の色: #e67e22; } .btn-fill-vert { 背景色: #e5e5e5; 境界線: 1px 実線 #e5e5e5; 色: #a6a6a6; オーバーフロー: 非表示; } .btn-fill-vert:before、.btn-fill-vert:after { コンテンツ: ''; 位置: 絶対; 幅: 100%; 高さ: 0; 不透明度: 0; 左: 0; Zインデックス: -1; } .btn-fill-vert:before { 上位: 50%; } .btn-fill-vert:after { 下部: 50%; } .btn-fill-vert:hover { 色: #fff; } .btn-fill-vert:hover:before、.btn-fill-vert:hover:after { 高さ: 50%; 不透明度: 1; } .btn-fill-vert.btn-red:before、.btn-fill-vert.btn-red:after { 背景色: #e74c3c; } .btn-fill-vert.btn-red:hover { 境界線の色: #e74c3c; } .btn-fill-horz-o { 背景色: 透明; 境界線: 1px 実線 #d0d0d0; 色: #B8B8B8; オーバーフロー: 非表示; } .btn-fill-horz-o:before、.btn-fill-horz-o:after { コンテンツ: ''; 位置: 絶対; 上: 0; 幅: 0; 高さ: 100%; 不透明度: 0; Zインデックス: -1; } .btn-fill-horz-o:before { 左: 50%; } .btn-fill-horz-o:after { 右: 50%; } .btn-fill-horz-o:hover { 色: #fff; } .btn-fill-horz-o:hover:before、.btn-fill-horz-o:hover:after { 幅: 50%; 不透明度: 1; } .btn-fill-horz-o.btn-green:before、.btn-fill-horz-o.btn-green:after { 背景色: #2ecc71; } .btn-fill-horz-o.btn-green:hover { 境界線の色: #2ecc71; } .btn-fill-horz { 背景色: #e5e5e5; 境界線: 1px 実線 #e5e5e5; 色: #a6a6a6; オーバーフロー: 非表示; } .btn-fill-horz:before、.btn-fill-horz:after { コンテンツ: ''; 位置: 絶対; 上: 0; 幅: 0; 高さ: 100%; 不透明度: 0; Zインデックス: -1; } .btn-fill-horz:before { 左: 50%; } .btn-fill-horz:after { 右: 50%; } .btn-fill-horz:hover { 色: #fff; } .btn-fill-horz:hover:before、.btn-fill-horz:hover:after { 幅: 50%; 不透明度: 1; } .btn-fill-horz.btn-blue:before、.btn-fill-horz.btn-blue:after { 背景色: #3498db; } .btn-fill-horz.btn-blue:hover { 境界線の色: #3498db; } 要約する 上記は、私が紹介した CSS プロパティに基づくボタンのホバー ボーダーと背景アニメーションのコレクションです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: Dockerコンテナを終了した後も実行を継続する方法
>>: Vue で PC アドレスをモバイル アドレスにリダイレクトする方法
基本的な構文CREATE VIEW ステートメントを使用してビューを作成できます。構文の形式は次のと...
説明: 指定された時間内に前のノードのコンテンツを置き換えるタイマーを設定します。 1. キーコード...
コンピュータを再インストールし、最新バージョンのMySQLデータベースをインストールしました。その結...
1. はじめにPresto は、ギガバイトからペタバイトに及ぶデータ ソースに対してインタラクティブ...
イベントについて: MySQL 5.1 では、イベントの概念が導入され始めました。イベントは「時間ト...
jsvc の紹介実稼働環境では、Tomcat はデーモン モードで実行する必要があります。Tomc...
この記事では、VUEの具体的なコードを共有して、下部吸引ボタンを実装する例を紹介します。具体的な内容...
今日午後ずっと私を悩ませたバグを記録する半月前から始めましょう。それから.................
この記事では、WeChatアプレットのレコード機能を実装するための具体的なコードを参考までに紹介しま...
目次1. Vueにおけるwatchの役割はその名の通り、監視の役割です。 2. このオブジェクトのプ...
債券とは何かNIC ボンドは、実稼働シナリオでよく使用されるテクノロジーです。複数の NIC を 1...
この記事では、例を使用して、replace と regexp を使用して MySQL で正規表現を置...
CSS3 パターン ギャラリーこの CSS3 パターン ライブラリには、純粋な CSS3 を使用して...
この記事では、MySQL 8.0.15をダウンロードしてインストールするための具体的な手順を参考まで...
tomcatでは、jspは文字化けしませんが、htmlの中国語は文字化けします理由はいくつかあります...