CSS3效果:鼠标悬停背景展开效果

CSS3效果:鼠标悬停背景展开效果_第1张图片

看腻导航栏背景变色的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;
}

现在只能看到文字,还看不到背景色,因为背景元素没有内容也没有设置宽高。效果如图:


CSS3效果:鼠标悬停背景展开效果_第2张图片
只能看到文字,背景色没有撑开

2. 在文本元素下面显示背景元素

元素层叠效果一般是父relativeabsolute实现。

  • 文本元素
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;作用是背景平铺整个文本元素。

CSS3效果:鼠标悬停背景展开效果_第3张图片

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;
}
CSS3效果:鼠标悬停背景展开效果_第4张图片

鼠标悬停马上显示背景色,效果如同span:hover直接改变颜色一致。我们还需要给背景元素加上过渡。

span:after{
    content: "";
    background-color: #f00;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
    left: 50%;
    z-index: -1;
    transition: 0.3s;
}
CSS3效果:鼠标悬停背景展开效果_第5张图片

大功告成。


完整代码




    
    项目
    


项目



拓展

  1. 既然可以实现从中间向左右展开,是否可以实现从中间向上下展开?


    CSS3效果:鼠标悬停背景展开效果_第6张图片
  • 能否可以实现单向展开呢?(从左向右,从右向左,从上向下,从下向上)


    CSS3效果:鼠标悬停背景展开效果_第7张图片
  • 能否可以实现从中间向上下左右同时展开呢?


    CSS3效果:鼠标悬停背景展开效果_第8张图片
  • 能否可以实现对角方向展开呢?


    CSS3效果:鼠标悬停背景展开效果_第9张图片

** 以上四个问题全部解决,恭喜你,鼠标悬停背景展开效果完全学会了。**

如有疑问欢迎留言

你可能感兴趣的:(CSS3效果:鼠标悬停背景展开效果)