css--小米商城----logo与home图标切换

:before 、:hover 、transition、transform实例

先来看一下目标是什么，PiuPiu

先整个a

<div class="nav-logo"><a href="" class="logo"></a>
</div>

再开始整样式

.page-nav .nav-logo .logo
{position: relative;/*这个可以回过头来再看*/display: block;width: 55px;height: 55px;background-color: #ff6700;overflow:hidden; /*这个也很重要喔，不加会有惊喜*/
}

变成这个亚子

下面就开始今天的核心了，我们要的效果是两个图标排成一排，鼠标上去，左边的图标向右滑入视野（橘黄色的），右边的向右滑出视野

怎么实现呢？小米官网用了 :before 和 :after ,像这个亚子

.nav-logo .logo:after,.nav-logo .logo:before
{position: absolute;top: 0;left: 0;height: 55px;width: 55px;content: "";transition: transform .3s;/*这个也很重要喔，加在hover里会有惊喜*/
}

当然他们两个的位置不同，margin-left来解决重叠

.nav-logo .logo:after
{background: url(../img/mi-home.png) no-repeat 50% 50%;margin-left: -55px;
}
.nav-logo .logo:before
{background: url(../img/mi-logo.png) no-repeat 50% 50%;
}

静的这里就结束了，下面要让他动起来，像这亚（transition和transform现学现卖）

.nav-logo .logo:hover:after,.nav-logo .logo:hover:before /*这里面的:hover  与:before 之间不要有空格喔，不然也会有问题喔*/
{transform: translate(55px);
}

写到这里，就差不多了，上面注释的地方是自己错过的地方，希望看到的小白不要像我一样再在上面浪费太多时间

css--小米商城----logo与home图标切换相关推荐

Android之实现夸克浏览器书签和历史页面滑动时候右上角图标切换效果
1 需求实现夸克浏览器书签和历史页面滑动时候右上角图标切换效果,页面滑动的时候,图标也左右滑动,但是只是显示其中的一个 https://www.captainai.net/st/ 2 代码实现 xm ...
html css导航栏字体图标,HTML+CSS入门之两种图标字体库
本篇教程介绍了HTML+CSS入门之两种图标字体库,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < ## 0. 前言比较基础的图标加载:和块元素的背景background ...
【css】i标签icon图标旋转样式
[css]i标签icon图标旋转样式 [css]i标签icon图标旋转样式 [css]i标签icon图标旋转样式代码示例: <i class="el-icon-refresh&quo ...
esc键退出全屏 vue_vue项目实现全屏,退出全屏，图标切换的解决方案
vue项目实现全屏,退出全屏,图标切换的解决方案 vue项目点击按钮实现全屏很容易,点击按钮退出全屏也很容易. fullScreen(){ var element=document.documentE ...
WPF 窗体最大化、最小化、还原 | WPF 最大化/最小化按钮图标切换
UI界面: <Window x:Class="Test.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2 ...
CSS生成关闭叉叉图标
CSS 生成关闭叉叉图标 . <span id="closebtn" class="closebtn"></span>.closebtn ...
vue css变量实现多主题皮肤切换
实现方式多主题皮肤切换有很多种实现方式,可以用css预处理器实现.可以用js实现,其实最简单的一种方式是用css变量(CSS Variable)来实现在单页应用中,我们通过设置body的css变量 ...
教你用 css 写一个拟物化图标
拟物化(Skeuomorphism)风格的图标在iOS7发布之前广为流行.相当长一段时间,无论系统.网页还是第三方应用都争相使用拟物化的设计风格.那时候的dribbble网,各色优秀的拟物化设计作品也 ...
CSS 6 精灵图字体图标 CSS三角用户界面样式 vertical-align 溢出文字省略号常见布局技巧
目录 1.精灵图 1.1为什么需要精灵图 1.2精灵图(sprites)的使用 1.3精灵图使用案例 2.字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引 ...
126.如何使用CSS和 JS 创建简单图片切换
效果 (源码网盘地址在最后) 视频演示视频地址:https://www.ixigua.com/6914222592170263053/ 源码 index.html <!DOCTYPE html ...

css--小米商城----logo与home图标切换

:before 、:hover 、transition、transform实例

css--小米商城----logo与home图标切换相关推荐

最新文章

热门文章