今天想学学PM的技能, 打开了百度脑图的网站, 看到中间那个按键的hover效果蛮好看, 遂学习一下.

效果如下:

Demo

其实就是利用:before绘制了半透明白色的遮罩, 平时用transform: scale(0, 1)隐藏掉, :active时恢复到transform: scale(1, 1).

另外学到的一点就是按键按下时的缩小效果. 之前自己还在想如何确保缩小之后也是水平竖直居中的, 但是这个demo的实现方法很简单: transform: scale(0.95). 很好用. 看来需要多利用transform和想象力!

最新文章

1. ThinkPHP5 助手函数
2. github-创建版本库
3. C#(委托a)
4. topshelf包装redis为windows服务
5. Custom IFormatProvider
6. 算法：最大子数组own
7. 一天掌握Android JNI本地编程 快速入门
8. 浅谈数据库系统中的cache
9. 联想V480关闭UEFI安装Win7
10. Linux：最终用途cat命令查看不可见的字符
11. SCALA STEP BY STEP
12. STL—内存的配置与释放
13. httpClient 中的post或者get请求
14. Python2.X和Python3.X中Tkinter模块的文件对话框、下拉列表的不同
15. tidb调研
16. 如何实现跨域获取iframe子页面动态的url
17. Code Signal_练习题_firstDigit
18. 一个执行Dos命令的窗口程序，与各位分享。
19. 关于Bootstrap的悬浮窗口(popover)
20. Java程序员之Spring(一) 入门

热门文章

1. overflow 那些我们忽略的特点
2. problems record
3. java gui可见即可得
4. /etc/resolv.conf文件详解
5. EasyUI中combotree允许多选的时候onSelect事件会重复触发onCheck事件
6. oracle数据库TNS
7. 理解RunLoop
8. bzoj1688: [Usaco2005 Open]Disease Manangement 疾病管理
9. cenots 下的 lamp(备份与恢复)
10. 数据库创建&数据表创建