最新のWindows 10の更新プログラムをインストールした後、UIシステムは、国境を強調表示し、フレーム要素がマウスを知覚できる強調表示し、[スタート]メニューまたはUWPスタイルの設定画面でのタイルに大きな効果の詳細があることに注意セクションでは、マウスの動きに追従して移動します。突然アイデアを持っていた、我々はCSSを使用してこの効果を実現するだろうか？
分析
国境の近くにマウスを移動するにも徐々に変化が見られたときに、例えば、デスクトップカレンダーに反映されます。この効果は、効果をサーチしませんまあです！これは、マスクのマスク内のCSSと放射状のグラデーションを達成することができます。
しかし、問題は、マスクのマスクは、全体の要素、内容に影響を与えることなく、境界にのみ行動する方法はありませんに適用されます。これは、それだけで接することができ、発現の異なる層の実際の内容によって分離あろう。ああ、マウスの動きは、マスクの位置を更新し、それが問題になることはありません。
私は、普通の学部学生を211、985ではないですので、この技術へのWebフロントエンドに興味の小さなパートナーは、我々の研究サークルに追加することができ、英語が特に良好ではない、数学は特に良くありません。だから私は、フロントエンドを選びました。第六年の仕事、と私は彼がこの道を選んだうれしいです。767-273-102秋のドレス。ガチョウの工場ではそこに滞在するために起業家リーダーと一緒に、行って。私はあなたがまだ混乱している場合、私はあなたを助けるために、ささやかな手段の数を入力するように願って、みんなに自分の技術を共有したいです。夢を持つ人々のグループは、我々は別の都市にあってもよいが、我々は一緒に歩いていく先端の先端
実現
準備
まず、良好なラインと2つのカレンダーグリッド、ショーの日付情報層、層の境界線を表示するサーチライト効果の。フレックスレイアウト、グリッド又は、偶数インラインブロックとイェジンハオも問題ありません、これは重要ではなく、重要なのは、グリッドの上下のレベルである相対容器と位置合わせした後、我々は2つの絶対層を入れなければなりません固定リングアップ、。
<div class="calendar">
<div class="calendar-header">
<div class="week-day">一</div>
<div class="week-day">二</div>
<div class="week-day">三</div>
<div class="week-day">四</div>
<div class="week-day">五</div>
<div class="week-day">六</div>
<div class="week-day">日</div>
</div>
<div class="calendar-body">
<div class="grid-container border-layer">
<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>十四</span></div>
<div class="grid-item"><span>29</span><span>十五</span></div>
...
<div class="grid-item"><span>2</span><span>十九</span></div>
</div>
</div>
</div>
概略的なレイヤ：
効果は、このようなものです：
最初の境界層が隠さ時にマウスが我慢していません。
.border-layer {
...
visibility: hidden;
}
.calendar:hover .border-layer {
visibility: visible;
}
CSSマスク
Photoshopのレイヤーマスクに、ターゲット・エレメントに使用されるマスクとして画像を使用することができるようにCSSはマスク画像のアルファチャンネル（ある透明度情報）は、また、明るさを使用することを選択することができる（対象要素の一部が表示されているかを決定します情報）。
マスク画像は、実際の設定値と不透明度もたらすように作用する要素の半透明図であるならば、例えば、0.5と同じ効果を、マスク画像は、中間空洞尖ったスターである場合は、効果は、素子がに切断されることです五芒星形。
構文マスク及び背景がほとんど同じであり、ここでは、マスク・リピート繰り返しマスクサイズと、エッジの中心から半径80px透明勾配白丸ラジアル勾配を作成し、変形を防止します。
-webkit-mask-image: radial-gradient(circle at center, white 0%, transparent 80px);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 160px 160px; /* 半径80px 所以 size 需要是 160px */
次はマスク位置を更新するために来ます。一つの位置ずれ、ターゲット要素の相対的なマウスの座標を取得するために、まず、注意するには、2つのポイントがあります。
X / Yの束があるのMouseEvent、我々は相対的な文書pageX / pageYとの調整、マイナスターゲット要素の相対文書の座標は、あなたが私たちに必要な座標を取得することができます。ベクトル式：AB = AC - BC：
しかし、ここではマスク位置の座標はまた、それに対処する必要があります。我々は、緩やかな160×160の円形のマスクを定義し、マスク位置と背景位置は、左上隅に定義されるような実際のニーズ及びそのモンゴル層（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 bounding = borderLayer.getBoundingClientRect();
borderLayer.style.webkitMaskPosition = `${x - bounding.x - 80}px ${y -bounding.y - 80}px`;
});
正味の効果：codepen.io/liuxiaole-t ...
追伸
そして、マスクの境界線階層方式では、特定の状況でのみ有効であることができる適用、分離層は、さらにメンテナンスコストの多くを増加しています。時間内の情報へのMDNアクセス、実際と呼ばれる株式につまずいてきたがmask-border、マスクの境界に作用するように見える、何のブラウザの実装はありません。