CSS鼠标悬浮出现遮罩层代码演示

2018-6-13 10:33| 发布者: admin| 查看: 568| 评论: 0|来自: 蚂蚁部落

代码非常的简陋,只演示效果实现原理,这样就可以随心所欲的制作自己想要的效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#content {
  width: 300px;
  height: 300px;
  border-radius: 5px;
  background: green;
  margin: 40px auto;
  position: relative;
  overflow: hidden;
}
#content::after {
  display: block;
  content: "蚂蚁部落";
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background: blue;
  left: 0;
  top: 100%;
  transition: all 0.3s ease-in;
}
#content:hover:after {
  top: 15rem;
}
</style>
</head>
<body>
<div id="content"></div>
</body>
</html>

鼠标悬浮可以查看效果,代码比较简单,更多内容参阅相关阅读。

相关阅读:

(1).border-radius参阅CSS3 border-radius一章节。

(2).::after参阅CSS E:after/E::after伪对象选择符一章节。

(3).transition参阅CSS3 transition一章节。

(4).:hover参阅CSS E:hover伪类选择符一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部