操作効果: html <!-- この要素は表示されません。DOM は JavaScript によって生成されます --> <div class="root" style="display: none;"> <div> <div class="サイド左"></div> <div class="サイドトップ"></div> <div class="サイド右"></div> <div class="サイドボトム"></div> </div> </div> CS 体 { マージン: 0; 幅:100vw; 高さ:100vh; 背景: #010326; } 。根 { --glow_width: 2px; --アニメーションの長さ: 2秒; --遅延係数: 2; 位置: 絶対; 左: 50%; 上位: 50%; 幅: 300ピクセル; 高さ: 300px; 変換: 移動(-50%, -50%) 回転(45度); /* このシステムがどのように設定されているかを確認するには、以下の行のコメントを解除してください */ /* 境界線: 1px 破線赤; */ オーバーフロー: 非表示; } .サイド{ 位置: 絶対; 上: 0; 左: 0; } .サイド.左, .サイド.右{ 幅: var(--glow_width); 高さ: 0; 背景: linear-gradient(下へ、透明、#c03225、透明); アニメーション: heightAnim var(--animation_length) 線形無限、 ハイダーcalc(var(--delay_factor) * var(--animation_length)) var(--animation_length) 無限; } .サイド.トップ、 .サイド.ボトム { 幅: 100%; 高さ: var(--glow_width); 背景: linear-gradient(左、透明、#c03225、透明); アニメーション: widthAnim var(--animation_length) 0s 線形無限、 ハイダーcalc(var(--delay_factor) * var(--animation_length)) var(--animation_length) 無限; } .サイド.右{ 左: 自動; 右: 0; 高さ: 0; アニメーション遅延: calc(var(--animation_length) / 2); アニメーション方向: 通常、逆方向; } .サイド.ボトム { 上:自動; 下部: 0; 幅: 0; アニメーション遅延: calc(var(--animation_length) / 2); アニメーション方向: 通常、逆方向; } @keyframes 高さアニメーション { 0% { 高さ: 0px; } 50% { 高さ: 300px; 変換: 初期; } 100% { 変換: translate(0, 300px); } } @keyframes 幅アニメーション { 0% { 幅: 0px; } 50% { 幅: 300ピクセル; 変換: 初期; } 100% { 変換: translate(300px, 0px); } } @keyframes 非表示 { 0%、 50% { 不透明度: 0; } 51%、 100% { 不透明度: 1; } } js テンプレートを `<div class="root" style="transform: translate(-50%, -50%) rotate({{ value }})"> にします。 <div> <div class="サイド左"></div> <div class="サイドトップ"></div> <div class="サイド右"></div> <div class="サイドボトム"></div> </div> </div>` セグメントを9にする for(let i = -セグメント; i < セグメント; i++){ document.body.innerHTML += template.replace("{{ value }}", 90/セグメント * i + "deg") } // document.body.innerHTML += template.replace("{{ value }}", 90/segments * 0 + "deg") 上記は、CSS3 で光るボーダー効果を実現する方法の詳細です。CSS3 で光るボーダー効果の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 |
<<: MySQL実践ウィンドウ関数SQL分析クラスの生徒のテストの成績と生活費
>>: Linux で CPU 使用率が高くなる原因をトラブルシューティングするプロセスの詳細な説明
参考までに、JavaScriptを使用してドロップダウンメニューを実装します。具体的な内容は次のとお...
最近、Microsoft は Docker をネイティブにサポートする Windows Server...
質問LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...
Mysqlページングの2つのパラメータ ユーザー制限 1,2 から * を選択 1 は検索する最初の...
問題を見つける最近MySQLをMySQL 5.7にアップグレードした後、次のようなクエリでグループ化...
純粋な CSS を使用して波の効果を実現することは、常に非常に困難でした。 波形曲線を実現するにはベ...
目次Docker デプロイメント Always on クラスターDockerをインストールする建築関...
ページ内の a タグをクリックした後、ページ内の対応する場所にジャンプするようにします。方法は非常に...
1. 基本ライン 2. 特殊効果(効果は独立しておらず、互いに組み合わせることができます) 1. 両...
Docker コンテナに入った後、コンテナを終了すると、コンテナは Exited 状態に変わります。...
フロントエンドプロジェクトのパッケージ化.env.productionを見つけて、自分のIPまたはド...
目次1. useStateフック2. useRefフック3. useRef と useState 4...
マスターのメソッドによると、原因は sysctl net.ipv4.ip_forward であること...
HTML ハイパーテキスト ドキュメントの基本構造は、ドキュメント ヘッダーとドキュメント本体の 2...
serializableシリアル化(問題なし)トランザクションは順次実行する必要があります。前のトラ...