关于仿制Win10桌面日历鼠标悬浮效果有感

今天，正好在群里看见一位小伙伴在求助实现这种win10日历的效果

-----> 此处暂无图片，具体效果可以去网上查阅相关效果

于是，我开启了自己的实现之路：

      思路：将这种边框透明的渐变效果转为一张具有这种实现的图片，这样在每次hover的时候替换图片就可以了

      html实现:     

• <div class="test">
•     <ul>
•         <li>1</li><li>2</li><li>3</li>
•         <li>4</li><li>5</li><li>6</li>
•         <li>7</li><li>8</li><li>9</li>
•     </ul>
• </div>

      很简单的布局

       接下来是css的实现及解释：

• .test ul{
•         display: block;
•         overflow: hidden;    //如果子类超过该ul大小，直接剪裁
•         position: relative;   //整张图片是以ul标签的大小定的，因此以其为基准
• }
• .test ul li{    //这几个属性的实现比较通俗，不解释
•         list-style: none;
•         float: left;
•         text-align: center;
•         line-height: 160px;
•         width: 33.3%;
• }
• .test ul li:hover::before{    //重头戏：只有当hover的时候，才会构造before伪元素节点
•         content: '';
•         position: absolute;
•         padding: 16.5% 50%;    //不使用width来构造内容，当然也可以使用...
•         margin: -16.5% -50%;
•         height: 100%; //填充ul高度
•         background: url('1.jpeg') no-repeat center; //设置背景
•         z-index: -1; //沉下去，使得该伪元素整体是在li之下，这样不会阻碍到hover的实现。
• }

后续还会继续补充主要要点~~~~~