仿小米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,以及如何使块级元素水平居中

仿小米logo案例

上一篇:收购安全公司Shape对F5安全解决方案有什么重大意义?


下一篇:Dubbo 云原生之路:ASF 毕业一周年、3.0 可期