html怎么实现鼠标经过展开效果
本篇内容主要讲解“html怎么实现鼠标经过展开效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html怎么实现鼠标经过展开效果”吧!
十年的和布克赛尔蒙古网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整和布克赛尔蒙古建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联从事“和布克赛尔蒙古网站设计”,“和布克赛尔蒙古网站推广”以来,每个客户项目都认真落实执行。
分析
我们观察到,当鼠标悬停在导航栏的项目中,出现从中间向左右展开的背景效果;移开时,又从左右向中间收缩。可以做出如下分析:
文字本身是没有展开和收缩效果,说明文字与背景不是同一个元素。
文字在背景上面显示,文字元素与背景元素是上下层关系,也就是存在定位。
背景展开和收缩有明显的过渡效果。
实现
根据以上三点,我们逐个突破。
1. 文本元素与背景元素
文本元素
首先,文本使用span标签实现。加上宽高、居中等简单样式。
HTML
项目
CSS
span{
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
}
背景元素
背景本身没有具体意义,只是用来修饰,我们可以使用span伪元素:after实现(这样可以减少一个专门表示背景的标签)。
CSS
span:after{
content: "";
background-color: #f00;
}
现在只能看到文字,还看不到背景色,因为背景元素没有内容也没有设置宽高。效果如图:
只能看到文字,背景色没有撑开
2. 在文本元素下面显示背景元素
元素层叠效果一般是父relative子absolute实现。
文本元素
span{
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
position: relative;
}
背景元素
span:after{
content: "";
background-color: #f00;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
}
注意:top: 0;bottom: 0;right: 0;left: 0;作用是背景平铺整个文本元素。
3. 鼠标悬停背景元素展开
背景元素开始时位于水平中间位置,也就是说距离左右是文本元素长度的一半。当鼠标悬停到文本元素上,背景展开。
背景元素初始状态
span:after{
content: "";
background-color: #f00;
position: absolute;
top: 0;
bottom: 0;
right: 50%;
left: 50%;
z-index: -1;
}
鼠标悬停背景元素展开
span:hover:after{
right: 0;
left: 0;
}
鼠标悬停马上显示背景色,效果如同span:hover直接改变颜色一致。我们还需要给背景元素加上过渡。
span:after{
content: "";
background-color: #f00;
position: absolute;
top: 0;
bottom: 0;
right: 50%;
left: 50%;
z-index: -1;
transition: 0.3s;
}
大功告成。
完整代码
项目
span{
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
position: relative;
}
span:after{
content: "";
background-color: #f00;
position: absolute;
top: 0;
bottom: 0;
right: 50%;
left: 50%;
z-index: -1;
transition: 0.3s;
}
span:hover:after{
right: 0;
left: 0;
}
到此,相信大家对“html怎么实现鼠标经过展开效果”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
本文名称:html怎么实现鼠标经过展开效果
网址分享:http://scyanting.com/article/gphegd.html