vue实现Window10日历动画效果
自从从事了前端行业，就得了个职业病，就是看到任何界面的效果都会思考自己怎么实现，这不看见Window10的日历系统，就动起了歪心思，想复现这个效果。
image
效果分析
边框的可见是跟随鼠标位置来改变，鼠标hover的日期显示边框，鼠标点击过的日期显示边框
实现思路
利用两个盒子的堆叠，在上面的盒子只显示日期，下面的盒子有边框，在鼠标周围区域透明显示下面盒子的信息，鼠标hover和点击简单就不赘述了。
两个盒子堆叠简单，利用position的层级就可以实现，问题是怎么只让鼠标周围的区域透明显示，这里我想到了一个陈迹多年的css属性clip，clip是老式的剪切属性，必须要absolute或者fixed定位的元素才能使用，并且只能剪裁正方形，他有个升级版clip-path对元素的定位没有要求，而且也可以剪裁更多的形状，可以剪切圆形，他剪切后的标签会显示底层的内容，这个属性放置在上层盒子上，监听鼠标位置动态设置clip-path的位置即可。
代码
{{item}}
发表评论 (审核通过后显示评论)：