效果：做一个具有logo能过渡切换效果，类似于小米网站的logo

思路：将两个用于切换的logo以文字形式嵌入活动块banner的左右半，活动块banner的上级是主展示块box,初态只展示右半logo，利用margin变化来切换到左半logo，用过渡装饰，初态末态都是一个logo展示，一个logo遮住。

代码：https://github.com/Tracker647/weblearn/tree/master/%E4%BB%BF%E5%B0%8F%E7%B1%B3logo%E8%BF%87%E6%B8%A1%E6%95%88%E6%9E%9C%E5%88%B6%E4%BD%9C

学习时间：2小时

收获：复习了如何使用过渡效果，如何使用字体icon，以及如何使块级元素水平居中

仿小米logo案例的更多相关文章

  1. WPF之小米Logo超圆角的实现

    某些新闻:小米logo换新,程序员一行代码(border-radius:19px)实现,目前此行代码价值200万 某程序员内心:所以还是因为我代码写太少了,所以这200万才没有我的份吗? 这事儿也成功 ...

  2. html-模仿小米首页定位案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. ScrollView反弹效果 仿小米私密短信效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/28441197 如今非常多APP都给ScrollView加入了反弹效果.QQ.小米 ...

  4. 自定义控件（视图）2期笔记09：自定义视图之继承自ViewGroup（仿ViewPager效果案例）

    1. 这里我们继承已有ViewGroup实现自定义控件,模拟出来ViewPager的效果,如下: (1)实现的效果图如下: (2)实现步骤: • 自定义view继承viewGroup • 重写onLa ...

  5. 60.自己定义View练习（五）高仿小米时钟 - 使用Camera和Matrix实现3D效果

    *本篇文章已授权微信公众号 guolin_blog (郭霖)独家公布 本文出自:猴菇先生的博客 http://blog.csdn.net/qq_31715429/article/details/546 ...

  6. 仿小米便签图文混排 EditText解决尾部插入文字bug

    一直想实现像小米便签那样的图文混排效果,收集网上的办法无非三种: 1.自定义布局,每张图片是一个ImageView,插入图片后插入EditText,缺点是实现复杂,不能像小米便签那样同时选中图片和文字 ...

  7. 仿小米简约Calculator

    上个星期的时候,我想教我朋友做一个简单的app.想来想去教什么比較好.当时看见小米的计算器认为比較美丽,就想这个简单.然后就開始动手做了.我以为能够一个小时能够搞定.没想到花了快一天的时间. 哎.突然 ...

  8. 仿小米网jQuery全屏滚动插件fullPage.js

    演 示 下 载   简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...

  9. android 仿小米icon处理，加阴影和边框

    本人自己在做一个launcher,所以须要处理icon,加阴影和边框等.这仅仅是一种处理方法,其它的处理方法类似. 源码: https://github.com/com314159/LauncherI ...

随机推荐

  1. Linux学习之iostat命令详解

    我们可以用iostat 命令来监视系统输入/输出.设备负载,这通过观察与它们的平均传送速率相关的物理磁盘的活动时间 来实现.iostat 命令生成的报告可以用来更改系统配置,从而更好地平衡物理磁盘和适 ...

  2. Moviepy音视频开发：视频转gif动画或jpg图片exe图形化工具开发案例

    ☞ ░ 前往老猿Python博文目录 ░ 一.引言 老猿之所以学习和研究Moviepy的使用,是因为需要一个将视频转成动画的工具,当时在网上到处搜索查找免费使用工具,结果找了很多自称免费的工具,但转完 ...

  3. 第8.8节 Python使用__new__方法和构造方法__init__完成类实例化的过程详解

    第8.8节 Python使用__new__方法和构造方法__init__完成类实例化的过程详解 前面章节介绍了Python类中的__new__方法和构造方法__init__,并通过实例分析了二者之间关 ...

  4. 老猿学5G扫盲贴：中移动的5G计费架构中Nchf'服务化接口以及CHF中的AGF

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.关于Nchf' 在中移动企标中出现了在3GPP ...

  5. PyQt（Python+Qt）学习随笔：QListWidget查找项的findItems方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QListWidget列表部件的findItems方法用于查找列表部件是否有满足条件的项,调用语法如 ...

  6. PyQt（Python+Qt）学习随笔：Qt Designer组件属性编辑界面中对话窗QDialog的modal属性

    modal属性表示窗口执行show()操作时是以模态窗口还是非模态窗口形式展示,缺省为False,设置该值与QWidget.windowModality的值设置为 Qt.ApplicationModa ...

  7. 我摊牌了，大厂面试Linux就这5个问题

    说真的,这就是<我想进大厂>系列第八篇,但是Linux的问题确实很少,就这样,强行编几个没有营养的问题也没啥意义. 1.CPU负载和CPU利用率的区别是什么? 首先,我们可以通过uptim ...

  8. UOJ61. 【UR #5】怎样更有力气

    题目链接 Statement 给定一棵 \(n\) 点树 \(T\) 和 \(m\) 个操作 v u w : 在 \(T\) 中 \(u,v\) 的最短路上所有点里面选出若干对(可以不选,可以重复), ...

  9. 题解 CF611H 【New Year and Forgotten Tree】

    Solution 提供一种新思路. 首先考虑如何判断一个状态是否合法. 考虑把所有十进制长度一样的数缩成一个点. 这样的点的个数 \(\le 5\). 蒟蒻猜了一个结论:只要满足对于所有缩出来的点的子 ...

  10. 笔记-[ZJOI2007]仓库建设

    笔记-[ZJOI2007]仓库建设 [ZJOI2007]仓库建设 \(f_i\) 到第 \(i\) 个工厂并且建设了仓库. \[\begin{split} f_i=&\min\{f_j+\su ...