admin 管理员组

文章数量: 886992

初衷：无意见发现win10的系统日鼠标悬浮的特效非常好看，想尝试一下用CSS和JS实现一下。

先上一下目前实现的效果图：

难点是这种间隔效果和鼠标移动效果的实现，如下图

间隔效果的实现我采用了

background-clip: content-box;
padding: 2px;
background-color: gray;
border: 1px solid gray;

样式，为border和content加上颜色，并通过设置background-clip: content-box;将padding进行透明处理。

鼠标移动效果则是使用JS监听鼠标相对位置，通过设置和移动背景的位置实现，颜色和透明度的变化则是通过CSS渐变实现。

background-image: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-size: 92px 92px;
background-repeat: no-repeat;

鼠标监听方法：

tbody.addEventListener("mousemove", function(event) {
            var ev = event || window.event;
            ev.preventDefault();
            this.style["background-position"] = (ev.clientX - this.offsetLeft - 40) + "px " +
                (ev.clientY - this.offsetTop - 40) + "px";
        }, true);
        tbody.addEventListener("mouseout", function(event) {
            var ev = event || window.event;
            ev.preventDefault();
            this.style["background-position"] = "-92px -92px";
        }, true)

完整代码见：github地址

本文标签： 日历 特效 漂亮 系统 JS

版权声明：本文标题：JS+CSS实现漂亮的日历特效（仿win10系统日历） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1733966473h1648612.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。