当前位置: 首页 > Web前端 > HTML

win10日历交互效果

时间:2023-04-02 12:30:56 HTML

win10日历早就想尝试实现以下win10日历的动态css效果,现在终于有时间试试了。本文只是为了实现一个简单的效果。进阶文章后面会贴出目标效果。将鼠标移入目标元素,周围八个相关元素会亮起。.win10原图2.初级实现图3.高级实现图技术点定义publicclass:disable---灰色悬停(n)---高亮九块active---点击激活实现九块圆形高亮区域css:使用背景属性,取值为径向渐变css:径向渐变参数顺序:半径、渐变方向、渐变颜色js:点击绑定活动类名,移动绑定悬停类名(91)js:时间内绑定类名,先remove清空再bindjs:Handleawall,当鼠标上下左右触摸时,去掉相反方向的类名这只是初步实现。下一篇进阶文章将展示当鼠标移动时,高亮范围也会随之移动。在文章中,我将介绍另一种思路。