CSS3は光る境界線効果を実現します

CSS3は光る境界線効果を実現します

操作効果:

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

参考までに、JavaScriptを使用してドロップダウンメニューを実装します。具体的な内容は次のとお...

Windows Server 2016 に Docker をインストールする方法

最近、Microsoft は Docker をネイティブにサポートする Windows Server...

Linux で crontab 出力リダイレクトが有効にならない問題の解決方法

質問LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...

MySQL ページングの制限パラメータの簡単な例

Mysqlページングの2つのパラメータ ユーザー制限 1,2 から * を選択 1 は検索する最初の...

Mysql を 5.7 にアップグレードした後のグループ クエリの問題を解決する

問題を見つける最近MySQLをMySQL 5.7にアップグレードした後、次のようなクエリでグループ化...

波効果を作成するための CSS のトリック

純粋な CSS を使用して波の効果を実現することは、常に非常に困難でした。 波形曲線を実現するにはベ...

SQL Server 2019 Always On クラスターの Docker デプロイメントの実装

目次Docker デプロイメント Always on クラスターDockerをインストールする建築関...

hrefを使用すると、リンクをクリックするだけでページ上の特定の場所にジャンプできます。

ページ内の a タグをクリックした後、ページ内の対応する場所にジャンプするようにします。方法は非常に...

HTML いくつかの特別な分割線効果

1. 基本ライン 2. 特殊効果(効果は独立しておらず、互いに組み合わせることができます) 1. 両...

Dockerコンテナを閉じずに終了する方法の詳細な説明

Docker コンテナに入った後、コンテナを終了すると、コンテナは Exited 状態に変わります。...

docker を使用して crownblog プロジェクトを Alibaba Cloud にデプロイする方法

フロントエンドプロジェクトのパッケージ化.env.productionを見つけて、自分のIPまたはド...

JavaScript の useRef と useState の紹介

目次1. useStateフック2. useRefフック3. useRef と useState 4...

突然外部ネットワークからDockerにアクセスできなくなる問題の解決方法

マスターのメソッドによると、原因は sysctl net.ipv4.ip_forward であること...

HTMLの基礎: HTMLの基本構造

HTML ハイパーテキスト ドキュメントの基本構造は、ドキュメント ヘッダーとドキュメント本体の 2...

MySQL トランザクション分離レベルの詳細

serializableシリアル化(問題なし)トランザクションは順次実行する必要があります。前のトラ...