html 鼠标经过展开,CSS3效果：鼠标悬停背景展开效果

看腻导航栏背景变色的hover效果，我们看一下比较特殊的hover效果。

分析

我们观察到，当鼠标悬停在导航栏的项目中，出现从中间向左右展开的背景效果；移开时，又从左右向中间收缩。可以做出如下分析：

文字本身是没有展开和收缩效果，说明文字与背景不是同一个元素。

文字在背景上面显示，文字元素与背景元素是上下层关系，也就是存在定位。

背景展开和收缩有明显的过渡效果。

实现

根据以上三点，我们逐个突破。

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;

}

现在只能看到文字，还看不到背景色