HTML/CSS鼠标悬停实现logo图片滑动切换

核心实现方法：

利用定位+透明度+设置外边距切换显示图片，过渡属性调节切换时间

整体盒子设置宽高背景色，利用伪元素设置要切换的两张图片

例子：小米logo左侧滑动切换

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.header-logo {position: relative;}/* 设置a标签的样式 */.logo {display: block;width: 55px;height: 55px;overflow: hidden;background-color: #ff6700;text-align: left;text-indent: -9999em;}/* mi logo的样式 */.logo::before {/* 定位 */position: absolute;/* 伪元素必须要设置content属性 */content: '';/* 左偏移 */left: 0;/* 上偏移 */top: 0;width: 55px;height: 55px;/* 设置过渡 */transition: all .3s;/* 背景图片 */background: url(./images/mi-logo.png) no-repeat center center;/* 透明度 */opacity: 1;}/* mi home 的样式 */.logo::after {position: absolute;content: '';left: 0;top: 0;width: 55px;height: 55px;transition: all .3s;background: url(./images/mi-home.png) no-repeat center center;margin-left: -55px;opacity: 0;}/* 鼠标移入 让mi logo 往右侧进行滑动 */.logo:hover::before {opacity: 0;margin-left: 55px;}/* 鼠标移入 让mi home 回到盒子中间 */.logo:hover::after {opacity: 1;margin-left: 0;}</style>
</head><body><div class="header-logo"><a href="#" class="logo" title="小米官网">小米官网</a></div>
</body></html>

HTML/CSS鼠标悬停实现logo图片滑动切换相关推荐

html超链接点击状态改变背景颜色,div css鼠标悬停锚文本超链接文字背景颜色或图片变化...
css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇. 此DIV CSS ...
html鼠标悬停多个图片变灰,怎样用CSS让鼠标悬停在图片上图片变灰
我们常常在网页中看到这样一种效果,当你的鼠标移动到图片上的时候,图片变灰,或者变暗,这实际是图片被CSS设置为半透明样式.下面就给大家做一个实例看一下这种效果怎么实现a:hover img{filte ...
CSS鼠标悬停图片上图片变灰变色半透明
CSS鼠标悬停图片上图片变灰变色半透明 DIV CSS鼠标移动悬停在图片上图片变色或半透明变化效果实现,CSS鼠标悬停图片上图片变灰.图片变色.图片半透明一.DIVCSS5介绍与说明: - ...
css鼠标悬停图片剪辑路径效果
下载地址一款css鼠标悬停图片剪辑路径效果,当鼠标悬停在图片上时,图片按一定路径放大的动画特效,生动形象,让图片灵活起来. dd:
css鼠标悬停事件，css鼠标悬停特效
1.css父元素hover悬停子元素缩放 .col-lg-4 img{ cursor: pointer; transition: all 1s ease; } .col-lg-4:hover img ...
Html字母变大的代码,css鼠标选中字体变大 div css鼠标悬停超链接的文字变大
css鼠标选中字体变大 css鼠标悬停超链接的文字变大 CSS布局鼠标悬停在超链接上字体变大,css实现鼠标经过锚文本文字时改变字体大小篇. 实现这一效果需要的是:hover伪类设置需要字体. 鼠标选 ...
手机端图片滑动切换效果
最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环 ...
JavaScript html 图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻
新闻展示,滚动新闻程序说明原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果. 首先需要一个容器,程序会自动设置容器overflow为hidden,如果 ...
移动端和PC端都兼容的图片滑动切换展示效果—PhotoSwipe
介绍一款兼容移动端和PC端的图片滑动切换展示效果-PhotoSwipe,PhotoSwipe是一款可以在移动触控设备上和PC桌面上完美运行的免费开源的图像展示l类独立的Javascript库,它基于H ...

HTML/CSS鼠标悬停实现logo图片滑动切换

核心实现方法：

HTML/CSS鼠标悬停实现logo图片滑动切换相关推荐

最新文章

热门文章