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

最后

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

相关推荐
知识分享小能手4 分钟前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
文心快码BaiduComate12 分钟前
限时集福!Comate挂件/皮肤上线,符(福)气掉落中~
前端·后端·程序员
勇敢di牛牛12 分钟前
vue3 + mars3D 三分钟画一个地球
前端·vue.js
IT_陈寒1 小时前
Python+AI实战:用LangChain构建智能问答系统的5个核心技巧
前端·人工智能·后端
袁煦丞1 小时前
MoneyPrinterTurbo一键生成短视频:cpolar内网穿透实验室第644个成功挑战
前端·程序员·远程工作
代码小学僧1 小时前
让 AI 真正帮你开发:前端 MCP 实用技巧分享
前端
晴殇i2 小时前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
Json____2 小时前
使用node Express 框架框架开发一个前后端分离的二手交易平台项目。
java·前端·express
since �2 小时前
前端转Java,从0到1学习教程
java·前端·学习
小奋斗2 小时前
面试官:[1] == '1'和[1] == 1结果是什么?
前端·面试