关于仿制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的实现。
}

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

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

[译] CSS 变量实现炫酷鼠标悬浮效果
原文: Stunning hover effects with CSS variables 我的博客:[译] CSS 变量实现炫酷鼠标悬浮效果我最近从Grover网站上的有趣的悬停动画中获得灵感.将 ...
React 入门：实战案例 TodoList Item鼠标悬浮效果
文章目录目标实现效果实现思路实现步骤第一步:Item 组件中定义一个 `mouse` 的 state 属性第二步:定义悬浮事件回调第三步:绑定事件处理,及悬浮样式控制完整代码 Item ...
鼠标悬浮效果：css:hover；js:mouseover,mouseout
目录一.css样式实现二.js实现一.css样式实现 1.xxx:hover 只能生成css可以控制的样式效果 <style>div:hover{color:red;} </s ...
【我的代码】前端遇上After Effects --- 鼠标悬浮效果（上）
通过AE+PS+CSS3动画实现炫酷的鼠标hover效果(上)--动画的制作和PNG序列的输出一.大体思路大概就是用AE做动画导出帧序列,PS排版成一个长条的图片,然后再在css样式中设置动画. ...
win10桌面上鼠标右键卡顿（一直显示小圆圈）解决办法
2018/5/30 15:05 鼠标右键无反应,小圆圈一直转,然而其他程序却可以打开. 解决方法:(注册表方法试过,无效,然后进行了下述操作) win+R打开命令行,输入services.msc 找 ...
css3探测光圈_CSS3按钮鼠标悬浮光圈效果
1 .HTML相关知识点 HTML(超文本标记语言)是网页的核心.首先你要学会,不要害怕,HTML很容易学习的,刚开始多记多练,但是到最后还是要自己深入专研,简单的入门是很快,但学好HTML是成为We ...
vue实现鼠标悬浮显示全部内容
在做vue项目中常常会遇到内容太长显示不全这就用到鼠标悬浮效果了使用 (element-ui) <el-tooltip :content="全部内容" placeme ...
“会议室使用情况”实现周日历和日程，可新建日程，鼠标悬浮显示当日日程
直接上图: 使用的数据可通过请求后台拿到,数据格式有点复杂,取得中间的事件需要先获取横向会议室id,再获取纵向日期,两个维度对应上即可渲染,具体格式参考代码中的occupyInfo对象. ...
html旋转墙壁效果,css3实现照片墙效果，鼠标悬浮时旋转放大并摆正
一张张照片散乱的撒在一起,鼠标悬浮时旋转放大并摆正,效果如下图(所有图片均来自网络),主要使用到的css3属性有:transition.transform(scale.rotateZ).box-sha ...

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

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

最新文章

热门文章