win10日历交互效果

win10日历

早就想试着实现以下win10日历的动态css效果，现在终于有时间试试啦。
本篇文章只是实现简单的效果，进阶篇后续会放上来

目标效果

1. 鼠标移入目标元素，周围相关八块元素点亮，点亮高光范围呈圆形
2. 点击元素选中，呈蓝色色块

实现效果图

1.win10原图

2.初级实现图

3.进阶实现图

技术点

1. 定义公共类：

   • disable---置灰
   • hover(n)---高亮的九个块
   • active---点击激活

2. 实现九个块呈圆形的高亮区域

   • css:使用background属性，值是径向渐变
   • css:径向渐变参数顺序：半径、渐变方向、渐变色
   • js:点击绑定active类名，移动绑定hover类名(9个)
   • js:时间内绑定类名，先移除清空再绑定
   • js:碰壁处理，鼠标碰到上下左右时，相对反方向移除类名

代码

相关代码点击这里查看吧
初级实现github查看代码

---

其他

这个只是初步的实现，接下来的进阶篇会显现鼠标移动时，高亮范围也相继移动
这篇文章的圆形高亮范围实现效果，是通过九个小块拼接出来的圆形，下篇文章我会介绍另外一种思路实现。