CSS: Windows10 achieve imitation mouse illuminates border effect

After installing the latest Windows 10 update, noted that the UI system, there are details of a great effect in the tile in the Start menu or the UWP-style setup screen, highlight the frame elements can be perceived mouse, highlight border section will move to follow the movement of the mouse. Suddenly had an idea, we could achieve this effect with CSS?

analysis

Take your desktop calendar effect, for example, when the mouse moves near the border also seen gradual change. This effect does not searchlight effect is Well! This can achieve with a radial gradient with CSS in mask mask.

But the problem is, mask mask is applied to the entire element, no way to act only on border without affecting the content. This, it would only be able to border and separated by the actual content of the different layers expressed. Ah, mouse movement updates the mask position, it should not be a problem.

Small partners interested in the web front end to this technology can be added to our study circle, because I am not a 211, 985, just an ordinary undergraduate students, English is not particularly good, mathematics is not particularly good. So I chose the front end. Work sixth year, and I am glad he chose this path. 767-273-102 autumn dress. In the goose factory done, along with entrepreneurial leader to stay there. I want to share their technology to everyone, if you're still confused, I hope to enter a number of modest means, to help you. Are a group of people with a dream, we may be in different cities, but we will walk together with the front tip of the tip

achieve

Ready to work

First of all, good line and two calendar grid, show date information layer, layer border show searchlight effect. Ye Hao with flex layout, grid or, even inline-block are also no problem, this is not important, important is the upper and lower levels of the grid must be aligned with the relative containers and then we put the two absolute layer ring up, fixed.

<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>

Layer schematic:

The effect is like this:

Mouse does not put up when the first border layer hidden away.

.border-layer {
 ...
  visibility: hidden;
}

.calendar:hover .border-layer {
  visibility: visible;
}

CSS Mask

CSS Mask like in Photoshop layer mask, you can use a picture as a mask used in the target element, the image alpha channel (transparency information that is) determines which part of the target element is visible (you can also choose to use the brightness information).

For example, if the mask image is a translucent view of the acting element to effect the actual setting and opacity: 0.5 the same effect; if the mask image is an intermediate hollow pointed star, the effect is that the element is cut into five-pointed star shape.

Mask syntax and the background is almost exactly the same, here we create a radial gradient with radius 80px transparent gradient white circle from the center to the edge, with the mask-repeat and repeat mask-size and prevent deformation.

  -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 */

Next we come to update the mask-position. There are two points to note, first, to get the relative mouse coordinates of the target elements, one position shift.

MouseEvent There are a bunch of X / Y, we coordinate with the relative document pageX / pageY, minus the coordinates of the target element relative document, you can get coordinates we need. Vector formula: AB = AC - BC :

However, the coordinates of the mask-position here also need to deal with it. We define a circular mask of a gradual 160x160, and mask-position and background-position, as defined in the upper left corner is the position of the Mongolian layers (0,0) of the actual needs and which coordinate container aligned. So we need to calculate the coordinates of minus (80, 80) to make the gradation center coordinates of the mouse and consistent.

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`;
});

The net effect: codepen.io/liuxiaole-t...

postscript

Then apply the mask border hierarchical scheme can only be effective in certain situations, the separation layer is further increased a lot of maintenance costs. MDN access to the information in time, actually have stumbled upon a stock called mask-border, looks like acting on the border of the mask, there is no browser implementations.