效果：做一个具有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. 区块链学习5：智能合约Smart contract原理及发展历程科普知识

    ☞ ░ 前往老猿Python博文目录 ░ 一.智能合约的定义 通俗来说,智能合约就是一种在计算机系统上,当一定条件满足的情况下可被自动执行的合约,智能合约体现为一段代码及其运行环境.例如银行信用卡的自 ...

  2. web文件包含

    web安全~文件包含总结   文章来自freebuf,作者总结的很好,所以拿来做笔记用!!! 0×01 文件包含简介 服务器执行PHP文件时,可以通过文件包含函数加载另一个文件中的PHP代码,并且当P ...

  3. 最简 Spring AOP 源码分析！

    前言 最近在研究 Spring 源码,Spring 最核心的功能就是 IOC 容器和 AOP.本文定位是以最简的方式,分析 Spring AOP 源码. 基本概念 上面的思维导图能够概括了 Sprin ...

  4. Springboot mini - Solon详解（四）- Solon的事务传播机制

    Springboot min -Solon 详解系列文章: Springboot mini - Solon详解(一)- 快速入门 Springboot mini - Solon详解(二)- Solon ...

  5. (原创)nginx反向代理上网，使docker可以拉取镜像

    转载请注明出处:饭饭博客:https://www.cnblogs.com/zzf0305/p/9602107.html 摘语:参考了N多大侠的资料,终于将自己的环境配置起来了.站在众多巨人的肩膀进行总 ...

  6. selenium.common.exceptions.WebDriverException: Message: 'chromedriver'解决

    相信很多第一次学习selenium的同学们也对这个异常不陌生了,但具体该如何解决这个bug呢? 主要的原因还是因为selenium模拟的客户端对浏览器的操作,但相应浏览器的驱动版本不匹配导致的. 为了 ...

  7. 【ubantu下安装python3.6】

    Ubuntu16.04默认安装了Python2.7和3.5 请注意,系统自带的python千万不能卸载! 输入命令python

  8. Java 设计模式 —— 组合模式

    在现实生活中,存在很多"部分-整体"的关系,例如,大学中的部门与学院.总公司中的部门与分公司.学习用品中的书与书包.生活用品中的衣服与衣柜.以及厨房中的锅碗瓢盆等.在软件开发中也是 ...

  9. centos 7系统安装mysql 8.0

    一.关闭防火墙 [root@node01 ~]# systemctl disable firewalld [root@node01 ~]# systemctl stop firewalld [root ...

  10. 容器编排系统之Pod生命周期、健康/就绪状态探测以及资源限制

    前文我们了解了在k8s上的资源标签.标签选择器以及资源注解相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/14141080.html:今天我们来聊下k8 ...