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

效果如下:

Demo

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

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

Button with Hover Effect (Learned from 百度脑图)的更多相关文章

  1. 百度脑图-离线版（支持Linux、Mac、Win）

    免费好用的思维导图软件(在线版) 离线版:桌面版脑图是基于百度脑图的本地化版本,帮助你在没有互联网环境的情况下,依然可以使用脑图工具. 百度脑图帮助你进行思维导图,可以运用于学习.写作.沟通.演讲.管 ...

  2. 思维导图趋势大分析（MindMaster与百度脑图)

    思维导图现在可以说是大流行期间,涉及学习.工作.生活方方面面的内容. 一.什么是思维导图 思维导图的英文名称是The Mind Map,也叫做心智导图,脑图,心智地图,脑力激荡图等.思维导图应用图文兼 ...

  3. java部分基础知识整理----百度脑图版

    近期发现,通过百度脑图可以很好的归纳总结和整理知识点,本着学习和复习的目的,梳理了一下java部分的知识点,不定期更新,若有不恰之处,请指正,谢谢! 脑图链接如下:java部分基础知识整理----百度 ...

  4. OpenResy+Lua 利用百度识图 将图片地址解析成文字

    LUA代码:(注:LUA里有一个调用百度识图的接口IP:123.125.115.189(stu.baidu.com),不知为什么我的虚拟机无法解析stu.baidu.com,所以我只能PING出IP来 ...

  5. naotu.baidu.com 非常棒的脑图在线工具

    1.png 2.txt 短租 前台功能 房源查看 房源搜索 城市房源 注册登录 预定房源 房源退订 在线支付 评价房源 个人中心 我的订单 我的账户 我的收藏 消息通知 管理员后台 房源发布 会员管理 ...

  6. 【JVM专题】JVM从概述到调优图文详解，含思维脑图深度剖析！

    JVM概述 JVM 是一种用于计算机设备的规范,它是一个虚构的计算机的软件实现,简单的说,JVM 是运行 byte code 字节码程序的一个容器. 它有一个解释器组件,可以实现 JAVA 字节码和计 ...

  7. 安卓贴图源码--->单点触控.多点触控.类似in/百度魔图

    效果如图: 类似in,百度魔图,的贴图功能  核心的地方:单/多点 旋转缩放后记录各个顶点小图标位置 引用这里 http://blog.csdn.net/xiaanming/article/detai ...

  8. 《Reactive_MircService_Architecture》 脑图

    Reactive_MircService_Architecture Lightbend CTO的50页的小册子,对响应式系统以及微服务架构介绍非常全面,整理了一个脑图来先.

  9. WEB前端知识体系脑图

    说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点 ...

随机推荐

  1. MySQL5.7.12新密码登录方式及密码策略

    在Centos6.6上安装MySQL5.7.12时,遇到了一个问题 安装后在/root目录下没有发现有.mysql_secret这个文件,所以没有没法按照官方文档上说的那样使用,这里记录下, 解决方式 ...

  2. MySQL的链接，查看数据库，使用数据库，查看表

    MySQL的链接,查看数据库,使用数据库,查看表 mysql> show databases; +--------------------+ | Database | +------------ ...

  3. Unity3D 关于运动模型

    首先,要让一个物体在3D世界里面运动起来. 要在一个具有碰撞器的面和一个具有碰撞器的体. 要具有碰撞器属性,不然其他物体会穿过的. 默认的碰撞器是一个具有阻碍效果的,如果让碰撞器具有了一个触发器属性I ...

  4. WebWork2和Spring MVC Framework的比较

    http://daihaixiang.blog.163.com/blog/static/3830134200711411515336/ WebWork2和Spring MVC Framework的比较 ...

  5. Think in java浏览一

    Think in java作为java语言的圣经书籍之一,几乎成为每个java程序员必看的书籍,不看都不好意思说自己是java程序员,不过一般也不说自己认真看了,就说自己翻了翻.作为写安卓的,当然也要 ...

  6. 项目由Windows2003 迁移到Windows 2008 过程，报 JS错误

    这两天在做服务器迁移,遇到了一些小的问题,现在做个粗略的记录 原服务器环境:Windows 2003 现服务器环境:Windows 2008 其中SSB项目在迁移部署后发现,报 JS的错误. 我在想除 ...

  7. CAS Server 单点登录开源项目

    https://www.apereo.org/cas/download This project contains code that can extent an existing ASP.NET w ...

  8. Ext.Net学习笔记03：Ext.Net MessageBus用法

    发布和订阅消息 Ext.Net MessageBus 的本质是一个消息订阅机制,ExtJS中没有这种机制,所以MessageBus的Ext.Net实现的,但并不是原创,这种功能在dojo中早就实现了, ...

  9. 浅谈c#接口的问题，适合新手来了解

    这段时间的项目有用到接口,开始不是特别理解接口,只是单单知道接口定义非常简单,甚至觉得这个接口只是多此一举(个人开发的时候).现在开始团队开发,才发现接口原来是这么的重要和便捷! 接下来就来谈谈我这段 ...

  10. Flexbox盒子弹性布局

    Can I Use? 2. 概念: 当你给一个元素使用了flexbox模块,那么它的子元素就会指定的方向在水平或者纵向方向排列.这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间. < ...