まず効果を見てみましょう: 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 スクリプトをインストールするチュートリアル
目次概要ボタンレベルの権限アイデンティティ認証管理R/U 権限権限の更新テナント管理テナント切り替え...
こんにちは、みんな!技術の話ばかりで髪は切らないトニーです。データベース関数は、何らかの機能を持ち、...
質問会社がサーバーを移行した後、デフォルトで作成された docker0 ブリッジが会社の外部ネットワ...
1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...
以下の記事を読んだ後、プロジェクトをサーバーにデプロイできます。Tomcat、JDK、MySQL な...
この記事の例では、ログインと登録を実装するためのspringboot+VUEの具体的なコードを参考ま...
序文システムの高可用性を満たすためには、通常、クラスターを構築する必要があります。ホストがクラッシュ...
前回、私たちは 2 つのヘッダー レイアウト (フレックスボックス 1 つとフロート 1 つ) を考...
目次1. 簡単な説明2. クラスターを作成する手順2.1. ディレクトリを作成する2.2. ソースコ...
VMware バージョン: VMware-workstation-full-16 VMware バー...
最近、次のデータ型のデータベースに遭遇しました:decimal(14,4)発生した問題は次のとおりで...
注記記事表示リストインターフェースを開発する場合、情報の基本的な概要を提供するために記事ヘッダーコン...
この記事の例では、JavaScriptで等速アニメーションを実装するための具体的なコードを参考までに...
ドキュメントはしばらく前から書いていましたが、アップロードする勇気がありませんでした。サーバーのセキ...
新しいserver.jsを作成する糸初期化 -y 糸を追加エクスプレスノードモン -D var ex...