使用CSS 中伪元素:before 和:after 做简单的动画（以小米商城非首页 logo 动画为例）
刚开始学前端不久，发现小米商城的页面做的特别漂亮，前几天在B站找了一个视频，是闪购页面的，跟上做了一下，但是他的视频只有静态的基本页面，没有动画，我今天弄了小半天（还是技术太差，哈哈哈），终于算是做出来了，而且效果和小米商城的一模一样。
先看效果
原理是这样的
在小米logo图片的左边插入一个房子的图片，当鼠标经过的时候，给他们设置 transform 动画就可以了，只是这里还有一个要注意的是透明的的问题，我们后面再说。
直接看代码解释
HTML部分
<a class="logo ir" href="//www.mi.com/index.html" title="小米官网">小米官网</a>
对，就这么一句
logo类就是为了方便设置图片的，ir类是为了设置 <a> 标签内部文字的
CSS部分
.header-log .logo {position: relative;display: block;width: 55px;height: 55px;overflow: hidden;background-color: #ff6700;
}
.header-log .ir {text-align: left;text-indent: -9999em; /*当CSS能加载出来，这个是看不见的，当只有HTML加载出来，这个文字是可以看到的*/
}
.header-log .logo::before, .header-log .logo::after {position: absolute; /*绝对定位*/left: 0;top: 0;z-index: 1; /*设置层级，相当于PS中的图层，越小越靠下*/width: 55px;height: 55px;content: ''; /*用来插入东西的，这里必须为空，这个经常和 :before 及 :after 伪元素配合使用*/transform-origin: 50% 50%;transition: all .2s; /*设置动画*/
}
.header-log .logo::before {background: url(../img/mi-logo.png) no-repeat 50% 50%;opacity: 1; /*透明的，1为完全不透明，0为完全透明*/transform: translate(0, 0);
}
.header-log .logo::after {background: url(../img/mi-home.png) no-repeat 50% 50%;opacity: 0; /*因为这张图片是在左边的，要设置成完全透明的*/margin-left: -55px; /*放在左边看不到的地方*/transform: translate(0, 0);
}
.logo:hover::before{ /*鼠标经过事件，小米logo变透明，向右移动*/opacity: 0;transform: translateX(55px);
}
.logo:hover::after{ /*鼠标经过事件，首页图标变不透明，向右移动*/opacity: 1;transform: translateX(55px);
}
注意
<a>标签position一定要是relative- 对
<a>标签设置display为block，去掉标签固有属性也很重要 - 图片是在CSS中引入，首页图片的处理办法（左移加完全透明）
- 动画的实现（图片位置的变化，透明度的变化）
这样，小米商城非首页的logo动画就完成了，也多了对 :befor 和 :after 这两个伪元素的使用技能
使用CSS 中伪元素:before 和:after 做简单的动画（以小米商城非首页 logo 动画为例）相关推荐
- CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器 伪元素选择器 伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
- 了解css中伪元素 before和after的用法
层叠样式表(CSS)主要用于将样式应用于HTML标签,但是在某些情况下,向文档添加额外标签元素是多余的或不可能的,CSS中实际上有一个特性允许我们在不中断实际文档的情况下添加额外标签,即伪元素. 你听 ...
- css在中元素添加元素,css - 在伪元素内容中添加换行符到:: after或:: before
css - 在伪元素内容中添加换行符到:: after或:: before 我无法访问页面的HTML或PHP,只能通过CSS进行编辑. 我一直在网站上进行修改并通过content或::before伪元 ...
- css 选择器 伪元素_CSS伪元素-解释选择器之前和之后
css 选择器 伪元素 选择器之前 (Before Selector) The CSS ::before selector can be used to insert content before t ...
- 触发bfc的html元素,什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...
- 5种css隐藏元素的方法_在CSS中隐藏元素的10种方法
5种css隐藏元素的方法 There are multiple ways to hide an element in CSS, but they differ in the way they affe ...
- 在 CSS 中隐藏元素的 10 种方法
在CSS中很多隐藏元素的方法,但这些方法的可访问性.布局.动画.性能和事件处理的方式有所不同. 动画: 一些CSS隐藏元素的方法一般是全有或者全无,元素要么是完全可见,要么是完全不可见,并且没有中间状 ...
- html中选择字体的元素,深入探讨CSS中字体元素
深入探讨CSS中字体元素 更新时间:2006年09月25日 00:00:00 作者: 字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所 ...
- 怎样使用css让矩形出现圆角,CSS中设置元素的圆角矩形
圆角矩形介绍 在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...
最新文章
- CSS的特性之层叠性介绍
- 基于Masstransit实现Eventbus的功能
- dedecms织梦上传图片302Error错误
- 大鱼风控笔记 1：量化风控体系的风险板块
- 机器学习实践指南（二）—— 正则化参数
- KMP原理及使用的再总结
- tar.bz2 解压命令以及使用指令
- 网易163邮箱和网易126邮箱有什么区别？
- 【调剂】厦门大学信息学院2022年硕士研究生复试名单及调剂预通知
- matlab在循环中保存jpg格式_matlab中的图片保存方法
- sklearn 5.18.3 SGD - Maximum margin separating hyperplane
- 14个PLC入门基础知识
- 02 shell编程之条件语句
- ValueError: Can only compute partial correlations for lags up to 50% of the sample size. The request
- 今天给大家介绍一下关于锂离子电池的负极材料选择
- List.isEmpty()与CollectionUtils.isEmpty的区别
- Druid以及监控界面的使用
- 计算机教学在语文中应用,信息技术在语文教学中的运用3篇论文
- 如果报了前端培训班，还是学不会怎么办？
- 怎么实现文字转换成语音？分享一个简单的小妙招