鼠标悬浮出现圆形信息遮罩层

快乐打工仔 分类:实例代码

鼠标悬浮出现圆形信息遮罩层属于前端实例代码,有关更多实例代码大家可以查看

分享一段代码实例,它实现了鼠标悬浮出现圆形遮罩层的效果。

遮罩层之上有信息描述,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
.icon-lists {
  overflow: hidden;
  background: #f7f7f7;
  padding: 40px;
}
.icon-lists .box {
  float: left;
  margin-right: 10px;
}
.box {
  position: relative;
  width: 46px;
  height: 46px;
  overflow: hidden;
  z-index: 1;
}
.box .info {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 46px;
}
.box .icon {
  position: absolute;
  top: 0;
  line-height: 46px;
  text-align: center;
  background: #eee;
  color: #333;
  font-size: 14px;
}
.box .info {
  position: absolute;
  top: 46px;
  z-index: 2;
  background: orange;
  color: #fff;
  text-align: center;
  line-height: 46px;
  -webkit-transition: top .2s ease-in;
  -moz-transition: top .2s ease-in;
  transition: top .2s ease-in;
}
.box:hover > .info {
  top: 0;
}
</style>
</head>
<body>
  <ul class="icon-lists">
    <li class="box">
      <i class="icon">A</i>
      <div class="info">div</div>
    </li>
    <li class="box">
      <i class="icon">B</i>
      <div class="info">css3</div>
    </li>
    <li class="box">
      <i class="icon">C</i>
      <div class="info">jquery</div>
    </li>
    <li class="box">
      <i class="icon">D</i>
      <div class="info">json</div>
    </li>
  </ul>
</body>
</html>

上面的代码实现了我们的要去,下面介绍一下它的实现过程。

一.代码注释:

* {
  margin: 0;
  padding: 0;
}

删除所有元素的外边距和内编剧。

星号是一个通配符选择器,可以参阅CSS 通配选择符(*)一章节。

其实在实际项目中通常会使用专门的重置css,具体可以参阅css预重置样式代码一章节。

ul {
  list-style: none;
}

去掉默认的li元素前面的样式。

.icon-lists {
  overflow: hidden;
  background: #f7f7f7;
  padding: 40px;
}

容器的样式,设置背景色和内边距等。

.icon-lists .box {
  float: left;
  margin-right: 10px;
}

设置左浮动,外右边边距是10px。

.box {
  position: relative;
  width: 46px;
  height: 46px;
  overflow: hidden;
  z-index: 1;
}

设置元素为相对定位,目的是让内部定位的元素以它为参考对象。

.box .info {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 46px;
}

设置信息元素的相关样式。

这里比较关键的就是将它设置为圆形。

.box .icon {
  position: absolute;
  top: 0;
  line-height: 46px;
  text-align: center;
  background: #eee;
  color: #333;
  font-size: 14px;
}

设置默认状态存放ABCD字符的元素的样式。

.box .info {
  position: absolute;
  top: 46px;
  z-index: 2;
  background: orange;
  color: #fff;
  text-align: center;
  line-height: 46px;
  -webkit-transition: top .2s ease-in;
  -moz-transition: top .2s ease-in;
  transition: top .2s ease-in;
}

设置信息元素的样式,默认top值是46px,也就是说它是隐藏的。

并且通过transition设置top以动画方式改变。

.box:hover > .info {
  top: 0;
}

鼠标悬浮改变信息元素的top值。

二.相关阅读:

(1).position可以参阅css position一章节。

(2).transition可以参阅CSS3 transition一章节。

(3).:hover可以参阅CSS E:hover一章节。

鼠标悬浮出现圆形信息遮罩层,这样的场景在实际项目中还是用的比较多的,关于鼠标悬浮出现圆形信息遮罩层就介绍到这了。

回复

我来回复
  • 暂无回复内容