Detailed explanation of CSS to achieve the effect of illuminating the border by imitating the Windows 10 mouse

After installing the latest Windows 10 update, I noticed a great detail effect in the system UI. In the tiles of the start menu or the UWP-style settings interface, the highlighted borders of the elements are mouse-aware, and the highlighted part of the border moves with the movement of the mouse. Suddenly an idea struck me: Can this effect be achieved using CSS?

analyze

Take the effect in the desktop calendar as an example. When the mouse moves, the nearby borders are also gradually visible. Isn’t this effect the searchlight effect? This can be achieved using a CSS mask with a radial gradient.

But the problem is that the mask applies to the entire element. There is no way to apply it only to the border without affecting the content. For this, we can only separate the border and the actual content and represent them in different layers. Well, updating the mask position when the mouse moves should not be a problem.

accomplish

Preparation

First, roll out two layers of calendar grids, one layer to display the date information, and the other layer to display the searchlight effect border. There is no problem with using flex layout, grid, or even inline-block. It doesn't matter. What's important is that the upper and lower grids must be aligned. Then we use a relative container to enclose the two absolute layers and fix them.

<div class="calendar">
    <div class="calendar-header">
        <div class="week-day">One</div>
        <div class="week-day">Two</div>
        <div class="week-day">Three</div>
        <div class="week-day">Four</div>
        <div class="week-day">Friday</div>
        <div class="week-day">Six</div>
        <div class="week-day">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>Fourteen</span></div>
            <div class="grid-item"><span>29</span><span>Fifteen</span></div>
            ...
            <div class="grid-item"><span>2</span><span>Nineteen</span></div>
        </div>
    </div>
  </div>

Layer diagram:

The effect is this:

When the mouse is not placed on it, hide the border layer first.

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

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

CSS Mask

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

For example, if the mask image is a semi-transparent image, the effect on the actual element is the same as setting opacity: 0.5; if the mask image is a five-pointed star with a hollow center, the effect is that the element is cropped into a five-pointed star shape.

The syntax of mask is almost identical to that of background. Here we use radial gradient to create a gradient circle with a radius of 80px from white in the center to transparent at the edge, and use mask-repeat and mask-size to prevent repeat and deformation.

-webkit-mask-image: radial-gradient(circle at center, white 0%, transparent 80px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 160px 160px; /* Radius 80px so size needs to be 160px */

Next we update mask-position. There are two points to note here, one is to get the relative coordinates of the mouse to the target element, and the other is the position offset.

There are a bunch of X/Y in MouseEvent. We use the coordinates pageX/pageY relative to the document, subtract the coordinates of the target element relative to the document, and we can get the coordinates we need. Vector Formula: AB = AC - BC :

However, the coordinates of mask-position here still need to be processed. The mask we defined is a 160x160 circular gradient, and mask-position is the same as background-position, defining which coordinate of the container the position of the upper left corner (0, 0) of the mask actually needs to be aligned with. Therefore, we need to subtract (80, 80) from the calculated coordinates to keep the gradient center consistent with the mouse coordinates.

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

Final result: https://codepen.io/liuxiaole-the-sasster/full/OGZgpv

postscript

The solution of layering borders and then applying masks is only effective in specific situations, and separating another layer increases a lot of maintenance costs. When I was looking up MDN information, I accidentally discovered that there is something called mask-border , which seems to be a mask for borders, but no browser has implemented it yet.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.