仿小米logo案例

效果:做一个具有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,以及如何使块级元素水平居中

原文地址:https://www.cnblogs.com/Tracker647/p/13762050.html