まず効果を見てみましょう: html <a href="#"> <span></span> <span></span> <span></span> <span></span> 進む </a> CSS3 体 { マージン: 0; パディング: 0; 背景色: #035f3c; } { 位置: 絶対; 上位: 50%; 左: 50%; 変換: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: 変換(-50%、-50%); -o-transform: 変換(-50%, -50%); 色: #16f03a; パディング: 30px 60px; フォントサイズ: 30px; 文字間隔: 2px; テキスト変換:大文字; テキスト装飾: なし; ボックスの影: 0 20px 50px rgba(0, 0, 0, 0.5); /* アニメーションラインの長さを削除するには: */ オーバーフロー: 非表示; } a:前{ コンテンツ: ""; 位置: 絶対; 上: 2px; 左: 2px; 下: 2px; 幅: 50%; 背景: rgba(255, 255, 255, 0.05); } span:nth-child(1) { 位置: 絶対; 上: 0; 左: 0; 幅: 100%; 高さ: 2px; 背景: 線形グラデーション(右、#035f3c、#16f03a); アニメーション: animate1 2s 線形無限; -webkit-animation: animate1 2s 線形無限; } @keyframes アニメーション1 { 0% { 変換: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: 変換X(-100%); -o-transform: translateX(-100%); } 100% { 変換: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); } } span:nth-child(2) { 位置: 絶対; 上: 0; 右: 0; 幅: 2px; 高さ: 100%; 背景: 線形グラデーション(下へ、#035f3c、#16f03a); アニメーション: animate2 2s 線形無限; -webkit-animation: animate2 2s 線形無限; /* 効果の継続性を保つために遅延を追加する*/ アニメーション遅延: 1秒; } @keyframes アニメーション2 { 0% { 変換: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: 変換Y(-100%); -o-transform: translateY(-100%); } 100% { 変換: translateY(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); } } span:nth-child(3) { 位置: 絶対; 下部: 0; 右: 0; 幅: 100%; 高さ: 2px; 背景: 線形グラデーション(左、#035f3c、#16f03a); アニメーション: animate3 2s 線形無限; -webkit-animation: animate3 2s 線形無限; } @keyframes アニメーション3 { 0% { 変換: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); } 100% { 変換: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: 変換X(-100%); -o-transform: translateX(-100%); } } span:nth-child(4) { 位置: 絶対; 上: 0; 左: 0; 幅: 2px; 高さ: 100%; 背景: 線形グラデーション(上へ、#035f3c、#16f03a); アニメーション: animate4 2s 線形無限; -webkit-animation: animate4 2s 線形無限; /* 効果の継続性を保つために遅延を追加する*/ アニメーション遅延: 1秒; } @keyframes アニメーション4 { 0% { 変換: translateY(100%); -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: 変換Y(100%); -o-transform: translateY(100%); } 100% { 変換: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: 変換Y(-100%); -o-transform: translateY(-100%); } } 上記は、CSS3 ボタン境界アニメーションの実装の詳細な内容です。CSS3 ボタン境界アニメーションの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 |
<<: 動的画像読み込み技術の応用とjquery.lazyloadプラグインの使用例
>>: 携帯電話に GreasyFork js スクリプトをインストールするチュートリアル
通常、コンポーネントのライフサイクルは、ビジネス ロジックが始まる場所です。ビジネスシナリオが複雑で...
現在、ほとんどの CPU は浮動小数点ユニット (FPU) をサポートしています。FPU は、プロセ...
セル - 表の内容 セルの余白 (表の余白) (cellpadding) - セルの外側の距離を表し...
ページデータの表示には Vue などの js のデータバインディング機構が使用されるため、クローラー...
1. asキーワードはアサーションを示すTypescript では、アサーションを表現する方法が 2...
概要データベースは通常、複数のトランザクションを同時に実行します。複数のトランザクションが、同じデー...
Gird レイアウトは Flex レイアウトといくつかの類似点があり、どちらもコンテナーの内部項目を...
vue3 での computed の使い方。vue3 は vue2 のオプション API と互換性が...
背景: 一部の実験はサーバー上で完了する必要があります。したがって、リモート サーバー上のコードをロ...
<br />ブラウザが次世代のXHTMLを処理できるようになる前に、このよりリッチなコン...
テスト用の MySQL ライブラリのセット。以前使用されていたバージョンは、centos6 のデフォ...
この記事は、MySQL 8.0.12解凍版のインストールグラフィックチュートリアルを記録しています。...
序文:インストール プロセスについては詳しく説明しません。問題に直接触れましょう。MySQL のリモ...
具体的なコードは次のとおりです。 <div id="ボックス"> &...
1. データベースを作成する 2. テーブルを作成する1. deptテーブルを作成する テーブル「d...