css伪元素实现小米商城顶部图标切换

最新推荐文章于 2022-10-02 01:45:00 发布

原创最新推荐文章于 2022-10-02 01:45:00 发布 · 1.5k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #css3 #前端

收录于

前端进阶之路同时被 2 个专栏收录

145 篇文章

订阅专栏

CSS

12 篇文章

订阅专栏

本文详细介绍了如何使用CSS伪元素及transition属性实现小米商城Logo的鼠标悬停动画效果，通过改变伪元素的margin和opacity属性，使鼠标悬停时Logo图标从品牌图标平滑切换到Home图标。

小米商城顶部header图标效果：点击查看效果

描述：鼠标划上，换成home图标，

思路：使用before和after伪元素设置图片，鼠标hover时改变margin值；

html：

<div class="logo"></div>

css:

.logo {
    position: relative;
    width: 55px;
    height: 55px;
    background: #ff6700; 
    overflow: hidden;
}
.logo::before,.logo::after {
    position: absolute;
    top: 0; 
    left: 0;
    content: "";
    width: 55px;
    height: 55px;
    background-origin: 50% 50%;
    transition: all 0.2s;
    z-index: 1;
}
.logo::before {
    background: url(https://s02.mifile.cn/assets/static/image/mi-logo.png) no-repeat 50% 50%;
    opacity: 1; 
}
.logo::after {
    background: url(https://s02.mifile.cn/assets/static/image/mi-home.png) no-repeat 50% 50%;
    margin-left: -55px;
    opacity: 0; 
}
.logo:hover::before {
    margin-left: 55px;
    opacity: 0;
}
.logo:hover::after {
    margin-left: 0;
    opacity: 1;
}