Explore the magic of mask image - the searchlight effect of win10 calendar can do this!

Brief introduction

Literally, it means mask . be familiar with PS My little friend must be interested in this “ mask ” The concept of , stay PS Can be called “ Mask ”, It is the outline of a component that specifies a layer /alpha Channel as the basis for their silhouette . stay CSS in ,mask-image This property is based on Specifies the transparency of the element as the basis for silhouette .

according to MDN Introduction on ,mask-image CSS Property is used to set the image of the mask layer on the element . Generally speaking , Use mask-image The elements of usually have transparent parts , Element is used to mask the specified DOM On , The part covered by the transparent part of the element will not be displayed , The part obscured by the opaque part will display . Notice that I'm talking about elements , It's usually pictures , It can also be an element with a gradient background color , What is displayed is a picture or background color .

Let's have a simple diagram

Browser compatibility

A small example —— Progress loading animation

The progress bar is a very common component , Progress bar progress bar , It is generally strip-shaped or beautiful, and can be made into a ring . To be more personalized , Many developers will put the loading progress into Logo in , Today we use mask-image This property simulates a similar loading effect .

because mask-image Only opaque parts will be displayed , therefore , We just need to prepare one Logo picture , A with a background color DOM, keep Logo Layer immobility , background DOM It can be realized by moving .

1. A sheet with a transparent part Logo picture

2. HTML structure

<div class="mask-layer">
    <div class="box"></div>
</div>
 Copy code 

3. Set the mask layer mask-layer With the background layer box The style of

.mask-layer {
    width: 300px;
    height: 200px;
    background: gray;
    -webkit-mask-image: url('mask.png');
    -webkit-mask-size: 300px 200px;
}

.box {
    width: 100%;
    height: 100%;
    background: linear-gradient(#f1c40f,#e67e22,#e74c3c);
    animation: move 10s;
}

@keyframes move {
    from{
        transform: translateY(100%);
    }
    to{
        transform: translateY(0);
    }
}
 Copy code 

Realization effect

I've seen wave effects before , Interested partners can try ~

Another example —— Win10 Calendar searchlight effect

Let's see how this works .

I think this UI It's really great ！ The border of the calendar element can sense the mouse , The change of mouse position can illuminate the surrounding border ！ Although I don't know how it is implemented , But our mask-image Can achieve a similar effect ！

Ideas

First put the form grid-body Use grid Layout Get it out , Then overlay this table with mask grid-mask, Be careful , This mask Not only Wide and high Want to be with grid-body bring into correspondence with , and External location 、 Internal layout Do the same . in other words , These two layers of elements must be aligned , One layer is used to put content , Another layer to show the illuminated border .

After finishing the physical layout , on mask grid-mask Set up mask-image The attribute is . Here we don't use pictures , It is Radial gradient background , We draw a circular gradient background , The part outside the radius is set to transparent Of , In this way, it will cover the content of the next layer without showing it , It will illuminate the inner border of the circle ！

How to perceive the mouse ？ We just need to be right grid-body binding mousemove event , According to the position of the mouse , Dynamically change mask The location is good ！

Code section

<!--  For consistency , Everyone wants nine squares ！ -->
<div class="grid-body">
    <div class="grid-mask">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>
 Copy code 

.grid-body {
    width: 300px;
    height: 300px;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;

    cursor: default;   
    color: rgba(255, 255, 255, .8);
    background-color: rgb(60, 60, 60);   
}

.grid-item{
    border: 3px solid transparent;
}

.grid-item:hover {
    border: 3px solid rgba(255, 255, 255, .3);
}

.grid-mask {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    /*  The above code is to keep the two layers consistent  */

    /*  Set up mask-image */
    /*  Aperture color  */
    background: transparent;
    -webkit-mask-image: radial-gradient(circle at center, white 0%, transparent 80px);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 160px 160px;
    pointer-events: none;
}

.grid-mask div{
    border: 3px solid rgba(255, 255, 255, .5)
}
 Copy code 

let grid  = document.querySelector('.grid-body')
let maskLayer = document.querySelector('.grid-mask')
let bounding = maskLayer.getBoundingClientRect()
grid.addEventListener('mousemove',(e)=>{
    let x = e.pageX
    let y = e.pageY
    maskLayer.style.webkitMaskPosition = `${x - bounding.x - 80}px ${y -bounding.y - 80}px`;
})
 Copy code 

Realization effect

This is the test version , Then I followed Win10 The style of the calendar really wrote a few high imitation versions ！

Reference material

www.cnblogs.com/vajoy/p/509…