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

小米商城顶部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;
}

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

css 商城两列_如何使用css伪元素实现超实用的图标库（附源码）
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
css 商城两列_css大法之使用伪元素实现超实用的图标库（附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
用css伪元素制作箭头图标
用css伪元素制作跳转箭头图标在一些前端框架中见到过伪元素做的图标,现在一般都自己写了,用伪元素可以代替不少图片 .yui-cell{ position: relative; } .yui-cell ...
html 的css骚操作,意想不到的 CSS 伪元素 before/after 各种骚操作 - 文章教程
CSS 伪元素 before/after 我们经常用到,常见的就是画个三角形.绘画背景阴影等,这篇文章将给大家分享还有很多有趣的操作,比如画线画图标等. 画细线普通的 border 最小高度为1px ...
web前端css伪元素使用阿里iconfont中Unicode编码
web前端css伪元素使用阿里iconfont中Unicode编码在阿里iconfont中创建项目新建项目搜索自己想要的图标并添加入库点击购物车添加至项目回到"我的项目" ...
【伪类与伪元素】用CSS伪元素（以:before为例）插入图片
[伪类与伪元素]用CSS伪元素(以:before为例)插入图片对于一些小图标类型的图片,若使用<img>略微有些麻烦,iconfont是一个不错的选择用起来也相当灵活,但是所需要步骤较为 ...
详解CSS伪元素::marker
::marker介绍 ::marker CSS pseudo-element(CSS伪元素) 选中一个list item的marker box,后者通常含有一个项目符号或者数字.它作用在任何设置了di ...
css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑它们都 ...
用CSS伪元素制作箭头
现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...

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

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

最新文章

热门文章