JS+CSS實現漂亮的日曆特效（仿win10系統日曆）

初衷：無意見發現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地址