Button with Hover Effect (Learned from 百度脑图)
今天想学学PM的技能, 打开了百度脑图的网站, 看到中间那个按键的hover效果蛮好看, 遂学习一下.
效果如下:
其实就是利用:before
绘制了半透明白色的遮罩, 平时用transform: scale(0, 1)
隐藏掉, :active
时恢复到transform: scale(1, 1)
.
另外学到的一点就是按键按下时的缩小效果. 之前自己还在想如何确保缩小之后也是水平竖直居中的, 但是这个demo的实现方法很简单: transform: scale(0.95)
. 很好用. 看来需要多利用transform
和想象力!
Button with Hover Effect (Learned from 百度脑图)的更多相关文章
- 百度脑图-离线版(支持Linux、Mac、Win)
免费好用的思维导图软件(在线版) 离线版:桌面版脑图是基于百度脑图的本地化版本,帮助你在没有互联网环境的情况下,依然可以使用脑图工具. 百度脑图帮助你进行思维导图,可以运用于学习.写作.沟通.演讲.管 ...
- 思维导图趋势大分析(MindMaster与百度脑图)
思维导图现在可以说是大流行期间,涉及学习.工作.生活方方面面的内容. 一.什么是思维导图 思维导图的英文名称是The Mind Map,也叫做心智导图,脑图,心智地图,脑力激荡图等.思维导图应用图文兼 ...
- java部分基础知识整理----百度脑图版
近期发现,通过百度脑图可以很好的归纳总结和整理知识点,本着学习和复习的目的,梳理了一下java部分的知识点,不定期更新,若有不恰之处,请指正,谢谢! 脑图链接如下:java部分基础知识整理----百度 ...
- OpenResy+Lua 利用百度识图 将图片地址解析成文字
LUA代码:(注:LUA里有一个调用百度识图的接口IP:123.125.115.189(stu.baidu.com),不知为什么我的虚拟机无法解析stu.baidu.com,所以我只能PING出IP来 ...
- naotu.baidu.com 非常棒的脑图在线工具
1.png 2.txt 短租 前台功能 房源查看 房源搜索 城市房源 注册登录 预定房源 房源退订 在线支付 评价房源 个人中心 我的订单 我的账户 我的收藏 消息通知 管理员后台 房源发布 会员管理 ...
- 【JVM专题】JVM从概述到调优图文详解,含思维脑图深度剖析!
JVM概述 JVM 是一种用于计算机设备的规范,它是一个虚构的计算机的软件实现,简单的说,JVM 是运行 byte code 字节码程序的一个容器. 它有一个解释器组件,可以实现 JAVA 字节码和计 ...
- 安卓贴图源码--->单点触控.多点触控.类似in/百度魔图
效果如图: 类似in,百度魔图,的贴图功能 核心的地方:单/多点 旋转缩放后记录各个顶点小图标位置 引用这里 http://blog.csdn.net/xiaanming/article/detai ...
- 《Reactive_MircService_Architecture》 脑图
Reactive_MircService_Architecture Lightbend CTO的50页的小册子,对响应式系统以及微服务架构介绍非常全面,整理了一个脑图来先.
- WEB前端知识体系脑图
说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点 ...
随机推荐
- Unity3D 中3D刚体组件的力
一般一个物体除了手动添加刚体受到重力作用外,还可以给该刚体添加一个其他的力. 这里就要涉及到一个恒定力(Constant Force)组件 首先要去掉物体的重力(因为重力是刚体组件中默认的一个向下的力 ...
- 使用DOM4J解析XMl文件与读取XML文件
XML文件 <?xml version="1.0" encoding="UTF-8"?> <bookstore> <book id ...
- ASP.NET MVC之PagedList使用
ASP.NET MVC之PagedList使用 ---由于最近项目中用到了分页这里也来记录一下,一方面给自己一个记录,另一方面给后来者一些帮助! 一.首先大家先来看一下效果
- SqlServer 由于未在SqlServer的此实例上安装复制组件解决方法
sqlserver2005在复制订阅时出现: “由于未在SqlServer的此实例上安装复制组件,Microsoft SQL server 无法访问这些组件,请参阅SQL Server……” 解决方法 ...
- HOOK函数(二)——全局HOOK
如果钩子函数定义于当前进程相关的线程中,则钩子函数只能处理当前进程的线程的消息,如果要想处理当前正在运行的所有进程的鼠标消息和键盘消息,那么安装钩子函数的代码必须实现在动态链接库中.所以如果想让安装的 ...
- 深入理解Java的接口和抽象类 _摘抄
http://www.cnblogs.com/dolphin0520/p/3811437.html 原文 深入理解Java的接口和抽象类 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可 ...
- 浅析ASP.NET的状态保持
ASP.NET的状态保持:1.viewstate:隐藏域,记录服务器端控件的状态,适用于页面不关闭的情况下多次与服务器交互,页面自己给自己传值:文本框的改变事件.IspostBack也依赖viewst ...
- sharepoint2013 新建母板页 新建页面布局 关联母板页和页面布局
1 母板页的应用和layout(页面布局)的创建和应用 母板页上传:将准备好的html和样式 通过spd中的导入方式导入模版html, 导入后: 然后在网站设置中进行转换为母板页. 随后编辑 ...
- PHP学习笔记(六)
<Wordpress 50个过滤钩子> 1-10 过滤钩子是一类函数,wordpress执行传递和处理数据的过程中,在针对这些数据做出某些动作之前的特定点执行.本质上,就是在wordpre ...
- news总结
上回的因为停网所以无法上传,被我保存成了一个我不会打开的东西,没法用了. news:新闻发布系统. 完成状态:差 个人理解度:一知半解 总结目的:秘密 直到现在,我对整个练习的知识点上的理解都不是很好 ...