css实现win10日历鼠标交互动效

win10右下角自带的日历，估计很多人用过吧，也估计很多人没用过吧，这些都不重要，先看下本次我用css和少量js实现的最终效果：

原理

如果你知道css中的mask，那么就不难知道是咋实现的，用一张图来展示一下其中的奥义：

回到本文的示例中来，背景是很多格子组成的，而文字不能被遮罩，因此处于上面一层，背景格子和mask处于下面一层。当鼠标滑动过程中，改变mask的位置，这样就实现了最终的效果。原理很简单，如果对mask不太熟悉的朋友可以自行查阅资料了解，下面来分解一下其中的关键点。

关键步骤

1.格子背景

格子背景是很规律的方框，因此画出来一个就行了，其他自动平铺即可，当然方式不止一种，我是通过线性渐变来实现的，通过三个linear-gradient叠加而成。下面代码中，定义了如下几个变量：

css 复制代码

:root {
    --bg-color: #000;
    --cell-len: 50px;
    --border-color: gray;
    --border-width: 2px;
    --gap: 5px;
    --half-gap: calc(var(--gap) / 2);
}

第一个linear-gradient

css 复制代码

linear-gradient(to right, 
    var(--bg-color) 0 var(--half-gap), 
    var(--border-color) 0 calc(var(--half-gap) + var(--border-width)),
    var(--bg-color) 0 calc(var(--half-gap) + var(--cell-len) - var(--border-width)),
    var(--border-color) 0 calc(var(--half-gap) + var(--cell-len)),
    var(--bg-color) 0 calc(var(--gap) + var(--cell-len)))

第一个渐变用来绘制出左右两边的边框；

第二个linear-gradient

css 复制代码

linear-gradient(to bottom, 
    var(--bg-color) 0 var(--half-gap), 
    var(--border-color) 0 calc(var(--half-gap) + var(--border-width)),
    transparent 0 calc(var(--half-gap) + var(--cell-len) - var(--border-width)),
    var(--border-color) 0 calc(var(--half-gap) + var(--cell-len)),
    var(--bg-color) 0 calc(var(--gap) + var(--cell-len)))

第二个渐变用来绘制出上下两边的边框，同时还要遮住左右两个边框在垂直方向上多出来的那部分；

第三个linear-gradient

css 复制代码

linear-gradient(to right, 
    var(--bg-color) 0 var(--half-gap), 
    transparent 0 calc(var(--half-gap) + var(--cell-len)),
    var(--bg-color) 0 calc(var(--gap) + var(--cell-len)))

这一层的渐变主要是遮住上下两个边框在水平方向上多出来的部分，最终效果如下：

2.渐变遮罩

本文的示例只用到了一个mask，通过radial-gradient实现渐变的遮罩显示效果，--mask-position-x和--mask-position-y就是鼠标动态移动的位置。核心点讲完，剩下js就不多讲了，也蛮简单，文章最后是示例demo。

css 复制代码

-webkit-mask-image: radial-gradient(circle at center, #000, #0000 55%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: var(--mask-position-x) var(--mask-position-y);
-webkit-mask-size: var(--mask-size) var(--mask-size);

最后

附上示例地址，就到这里吧。