Windows10のマウスを模倣して境界線を光らせる効果を実現するCSSの詳細解説

最新の Windows 10 アップデートをインストールした後、システム UI の詳細な効果が顕著に現れていることに気付きました。スタート メニューのタイルや UWP スタイルの設定インターフェイスでは、要素の強調表示された境界線がマウスに対応しており、境界線の強調表示された部分がマウスの動きに合わせて動きます。突然、あるアイデアが浮かびました。この効果は CSS を使用して実現できるだろうか?

分析する

デスクトップカレンダーでの効果を例に挙げると、マウスを動かすと、近くの境界線も徐々に見えるようになります。この効果はサーチライト効果ではないでしょうか？これは、放射状グラデーションの CSS マスクを使用して実現できます。

しかし問題は、マスクが要素全体に適用されることです。コンテンツに影響を与えずに境界にのみ適用する方法はありません。このためには、境界線と実際のコンテンツを分離し、異なるレイヤーで表現することしかできません。まあ、マウスが動いたときにマスクの位置を更新することは問題にならないはずです。

成し遂げる

準備

まず、カレンダー グリッドの 2 つのレイヤーを展開します。1 つのレイヤーには日付情報を表示し、もう 1 つのレイヤーにはサーチライト効果の境界線を表示します。フレックス レイアウト、グリッド、またはインライン ブロックを使用しても問題はありません。 重要ではありません。重要なのは、上部のグリッドと下部のグリッドが揃っている必要があることです。 次に、相対コンテナーを使用して 2 つの絶対レイヤーを囲み、固定します。

<div class="カレンダー">
    <div class="カレンダーヘッダー">
        <div class="week-day">1</div>
        <div class="week-day">2</div>
        <div class="week-day">3</div>
        <div class="week-day">4</div>
        <div class="week-day">金曜日</div>
        <div class="week-day">6</div>
        <div class="week-day">日</div>
    </div>
    <div class="カレンダー本体">
        <div class="グリッドコンテナ ボーダーレイヤー">
            <div class="grid-item"></div>
            ...
            <div class="grid-item"></div>
        </div>
            <div class="grid-container number-layer">
            <div class="grid-item"><span>28</span><span>14</span></div>
            <div class="grid-item"><span>29</span><span>15</span></div>
            ...
            <div class="grid-item"><span>2</span><span>19</span></div>
        </div>
    </div>
  </div>

レイヤー図:

効果は次のようになります:

マウスが置かれていないときは、まず境界レイヤーを非表示にします。

.border-layer {
 ...
  可視性: 非表示;
}

.calendar:hover .border-layer {
  可視性: 可視;
}

CSS マスク

CSS マスクは、Photoshop のレイヤー マスクに似ています。画像をターゲット要素のマスクとして使用できます。画像のアルファ チャネル (つまり、透明度情報) によって、ターゲット要素のどの部分が表示されるかが決まります (明るさ情報を使用するように選択することもできます)。

たとえば、マスク画像が半透明の画像である場合、実際の要素に対する効果は、不透明度を 0.5 に設定した場合と同じです。マスク画像が中が空洞の 5 角形の星である場合、要素が 5 角形の星形に切り取られる効果になります。

マスクの構文は、背景の構文とほぼ同じです。ここでは、放射状グラデーションを使用して、中心が白から端が透明になるまで半径 80 ピクセルのグラデーション円を作成し、mask-repeat と mask-size を使用して繰り返しと変形を防止します。

-webkit-mask-image: 放射状グラデーション(中央の円、白 0%、透明 80px);
  -webkit-mask-repeat: 繰り返しなし;
  -webkit-mask-size: 160px 160px; /* 半径 80px なのでサイズは 160px にする必要があります */

次に、mask-position を更新します。ここで注意すべき点が 2 つあります。1 つはマウスからターゲット要素までの相対座標を取得すること、もう 1 つは位置オフセットです。

MouseEvent には X/Y がたくさんあります。ドキュメントを基準とした pageX/pageY 座標を使用し、ドキュメントを基準としたターゲット要素の座標を減算すると、必要な座標を取得できます。 ベクトルの式: AB = AC - BC :

ただし、ここでのマスク位置の座標はまだ処理する必要があります。定義したマスクは 160 x 160 の円形グラデーションで、mask-position は background-position と同じで、マスクの左上隅 (0, 0) の位置を実際にコンテナーのどの座標に合わせる必要があるかを定義します。したがって、グラデーションの中心をマウスの座標と一致させるには、計算された座標から (80, 80) を減算する必要があります。

var borderLayer = document.querySelector(".border-layer");

document.querySelector(".calendar").addEventListener("mousemove", function(ev){
  var x = ev.pageX;
  var y = ev.pageY;
  var バウンディング = borderLayer.getBoundingClientRect();
  
  borderLayer.style.webkitMaskPosition = `${x - bounding.x - 80}px ${y -bounding.y - 80}px`;
});

最終結果: https://codepen.io/liuxiaole-the-sasster/full/OGZgpv

追記

境界線を重ねてマスクを適用するという解決策は特定の状況でのみ有効であり、別のレイヤーを分離するとメンテナンス コストが大幅に増加します。 MDN の情報を調べていたところ、偶然にもmask-borderというものがあることを発見しました。これは境界線用のマスクのようですが、まだどのブラウザも実装していないようです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。