CSS伪类实现遮罩层效果

CSS中的伪类可以更方便的帮助我们定义过渡效果，这里，我们详细介绍一下利用:hover实现遮罩层效果。:hover是指当鼠标悬停在元素上时所发生的效果。

实现遮罩层的步骤
需要两个相等大小的元素。
两个元素的位置应该相同。
遮罩层元素应该为黑色背景，白色字体。
鼠标在未悬浮到元素之上时，遮罩层应该透明。
鼠标在悬浮到元素之上时，应该减少遮罩层的透明度。
为遮罩层加上过渡时间。
效果展示
色彩因为录制gif时出现了偏差，但能说明原理。
代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.bottom {height: 100px;width: 100px;background-color: greenyellow;}.top {height: 100px;width: 100px;background-color: black;color: white;margin-top: -100px;opacity: 0;}.top:hover {opacity: 0.5;transition: opacity 2s;}</style>
</head><body> <div class="bottom"></div><div class="top"><center>遮罩层</center></div></body>
</html>

转载于：https://blog.csdn.net/weixin_43358075/article/details/90105644?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-7&spm=1001.2101.3001.4242

CSS伪类实现遮罩层效果相关推荐

css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别、遮罩层效果、三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器兄弟选择器属性选择器伪类选择器其他伪类选择器类元素选择器直接选择器否定选择器伪元素 :after清除浮动 :before和:after 用来写小三角形首字母 ...
css文字右边加横线,CSS伪类before，after制作左右横线中间文字效果
Title .container{ width: 1000px; margin: 10px auto; border: 1px solid red; } h3.title { color: #F2AE ...
html文本居中左右有横线,CSS伪类实现中间文字两边横线效果
利用CSS伪类实现中间文字两边横线效果效果图: 实现代码: CSS伪类实现中间文字两边横线效果 body { margin: 0; } .login_content { position: abso ...
CSS伪类实现中间文字两边横线效果
一.通过display:table实现 html <div class="line">中间文字</div> css .line {display: tabl ...
:empty css 可以用在哪些标签,CSS伪类:empty让我眼前一亮(实例代码)
最近看过我文章的都知道:我最近在负责一个微信小程序的项目,在其中遇到了很多有趣的事和一些"奇思妙想".本文的背景就是某天早上我看着wxml文件中一堆wx:if/else和hidde ...
HTML转义字符 Unicode和CSS伪类介绍
CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ ...
html鼠标点击伪类,CSS伪类：CSS3鼠标滑过按钮动画
前言按钮,对开发者而言,是非常常见的一个功能.前端通常会对按钮加入一些操作交互样式,增加一些用户体验. 比如:hover样式.点击样式.loading样式等.下面我们通过简单示例在学习一下css3动 ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
css伪类元素加在元素前,CSS伪类:before在元素之前 :after 在元素之后实例讲解
本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下. :before 伪元素在元素之前添加内容这个伪元素允许创作人员在元素内容的最前面插入生成内容. ...

CSS伪类实现遮罩层效果

CSS伪类实现遮罩层效果相关推荐

最新文章

热门文章