win10日历交互效果

yzhj00 2019-06-29

win10日历

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

目标效果

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

实现效果图

1.win10原图
win10日历交互效果
2.初级实现图
win10日历交互效果
3.进阶实现图
win10日历交互效果

技术点

  1. 定义公共类:

    • disable---置灰
    • hover(n)---高亮的九个块
    • active---点击激活
  2. 实现九个块呈圆形的高亮区域

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

代码

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


其他

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

相关推荐