#win10日历
早就想试着实现以下win10日历的动态css效果,现在终于有时间试试啦。
本篇文章只是实现简单的效果,进阶篇后续会放上来
文章都是基础知识,基础,基础,觉得简单也别喷好吗,答应我
目标效果
- 鼠标移入目标元素,周围相关八块元素点亮,点亮高光范围呈圆形
- 点击元素选中,呈蓝色色块
实现效果图
1.win10原图
2.初级实现图
3.进阶实现图
技术点
- 定义公共类:
- disable—置灰
- hover(n)—高亮的九个块
- active—点击激活
- 实现九个块呈圆形的高亮区域
- css:使用background属性,值是径向渐变
- css:径向渐变参数顺序:半径、渐变方向、渐变色
- js:点击绑定active类名,移动绑定hover类名(9个)
- js:时间内绑定类名,先移除清空再绑定
- js:碰壁处理,鼠标碰到上下左右时,相对反方向移除类名
代码
相关代码点击这里查看吧
github查看代码
其他
这个只是初步的实现,接下来的进阶篇会显现鼠标移动时,高亮范围也相继移动
这篇文章的圆形高亮范围实现效果,是通过九个小块拼接出来的圆形,下篇文章我会介绍另外一种思路实现。
文章都是基础知识,基础,基础,觉得简单也别喷好吗,答应我,么么哒