vue 日历翻拍效果_vue 实现 Window10 日历动画效果

vue 实现 Window10 日历动画效果

自从从事了前端行业, 就得了个职业病, 就是看到任何界面的效果都会思考自己怎么实现, 这不看见 Window10 的日历系统, 就动起了歪心思, 想复现这个效果.

image

效果分析

边框的可见是跟随鼠标位置来改变, 鼠标 hover 的日期显示边框, 鼠标点击过的日期显示边框

实现思路

利用两个盒子的堆叠, 在上面的盒子只显示日期, 下面的盒子有边框, 在鼠标周围区域透明显示下面盒子的信息, 鼠标 hover 和点击简单就不赘述了.

两个盒子堆叠简单, 利用 position 的层级就可以实现, 问题是怎么只让鼠标周围的区域透明显示, 这里我想到了一个陈迹多年的 CSS 属性 clip,clip 是老式的剪切属性, 必须要 absolute 或者 fixed 定位的元素才能使用, 并且只能剪裁正方形, 他有个升级版 clip-path 对元素的定位没有要求, 而且也可以剪裁更多的形状, 可以剪切圆形, 他剪切后的标签会显示底层的内容, 这个属性放置在上层盒子上, 监听鼠标位置动态设置 clip-path 的位置即可.

代码