Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use CSS to achieve imitation Windows10 mouse illuminating frame effect", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use CSS to achieve imitation Windows10 mouse illuminating frame effect" bar!

Analysis.

Take the effect in the desktop calendar as an example, the border nearby is also visible when the mouse is moved. This effect is the searchlight effect! This can be achieved with a mask mask in CSS with a radial gradient.

The problem, however, is that the mask mask works on the entire element, and there is no way to work on border without affecting the content. This, that can only separate the border from the actual content and represent it in different layers. Well, it should not be a problem to update the location of the mask when you move the mouse.

Realize the preparatory work

First of all, set up two layers of calendar grid, one layer to display the date information, the other layer to show the searchlight effect of the frame. It doesn't matter whether you use flex layout, grid or even inline-block, it doesn't matter, the important thing is that the upper and lower layers of the grid must be aligned, and then we use the relative container to circle and secure the two absolute layers.

One, two, three, four, five, six... 28, 14, 29, 15... 2, 19.

Layer diagram:

This is how it works:

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

. border-layer {... Visibility: hidden;}. Calendar:hover. Border-layer {visibility: visible;} CSS Mask

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

For example, if the mask image is a translucent image, the effect on the actual element is the same as setting opacity: 0.5. if the mask image is a five-pointed star hollowed out in the middle, the effect is that the element is cropped to the shape of a five-pointed star.

The syntax of Mask is almost exactly the same as that of background. Here we use a radial gradient to create a gradient circle with a radius of 80px from white in the center to transparent at the edge, together with 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, let's update mask-position. There are two points to note here, one is to obtain the relative coordinates of the mouse to the target element, and the other is the position offset.

There are a bunch of Xamp Ys in MouseEvent, and we can get the coordinates we need by using the coordinate pageX/pageY of the relative document, minus the coordinates of the target element relative to document. Vector formula: AB = AC-BC:

However, the mask-position coordinates here still need to be processed. The mask we define is a circular gradient of 160x160, while mask-position, like background-position, defines which coordinates of the container the position of the upper-left corner of the mask needs to actually align with. So we need to subtract the calculated coordinates (80,80) to keep the center of the gradient consistent with the coordinates of the mouse.

Var borderLayer = document.querySelector (".border-layer"); document.querySelector (".border") .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`;}) Thank you for your reading, the above is "how to use CSS to achieve imitation Windows10 mouse illuminating frame effect" content, after the study of this article, I believe that how to use CSS to achieve imitation Windows10 mouse illuminating frame effect of this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.