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>
智能推荐
计算机如何区分指令和数据？-程序员宅基地
文章浏览阅读1.1k次。2、通过地址来源区分，由PC（程序计数器）提供存储单元地址的取出的是指令，由指令地址码部分提供存储单元地址的取出的是操作数。来区分指令和数据，即在取指令阶段（或取指微程序）取出的为指令，在执行指令阶段（或相应微程序）取出的即为数据。这个是计算机组成原理里面的基础知识，2023年下半年软考软件设计师的选择题中考到过。我们知道，指令和数据都存放在内存里面，那么计算机是如何知道是取指令还是取数据呢？一般来说，记住是通过不同的。_计算机如何区分指令和数据
Css基础——Css字体属性_css font属性-程序员宅基地
文章浏览阅读402次，点赞12次，收藏7次。h2{font-family: "微软雅黑";p{font-family: "宋体";迪幻的主页姓名：迪幻性别：男专业：计算机科学与技术body{姓名：迪幻性别：男_css font属性
JS 计算含有emoji表情的字符串长度 和 截取_js 处理emoji表情的字符串长度-程序员宅基地
文章浏览阅读1.4k次。export const spliceTitleByLength = (text, length) => { let textArray = Array.from(text); let textLength = 0, i = 0; for (i = 0; i < textArray.length; i++) { const c = textArray[i]; textLength += encodeUtf8(c).length; ._js 处理emoji表情的字符串长度
暂停交易？ERC20合约整数溢出安全漏洞案例技术分析（一)-程序员宅基地
文章浏览阅读96次。区块链兄弟社区，区块链技术专业问答先行者，中国区块链技术爱好者聚集地作者：吴寿鹤，《区块链开发实战——以太坊关键技术与案例分析》的第一作者，《区块链开发实战——Hyperledger Fabric关键技术与案例分析》联合作者，IONChain 离子链 首席架构师，hyperLedger核心项目开发人员，区块链技术社区-区块链兄弟联合创始人。github: https://github.com/..._攻击合约safe和erc20的集合 例题
android studio中关联SDK源码_android studio 如果关联其他sdk项目-程序员宅基地
文章浏览阅读2.1k次。每次当我们更新完SDK后，想看SDK源码时，打开的源文件经常是不带注释的.class文件，虽然SDK已更新，但Source资源经常没及时更新，此时我们可以先关联低版本的可用的Source源码资源，如何关联呢？首先一次找到这个目录：C:\Users\用户\.AndroidStudio2.3\config\options然后找到jdk.table.xml文件，这个文件可以进行关联源码配置 接下来我们_android studio 如果关联其他sdk项目
Linux部署幻兽帕鲁服务器，PalWorld开服联机教程，保姆级教程_是否开启神秘的unko事件-程序员宅基地
文章浏览阅读2.4k次，点赞14次，收藏37次。幻兽帕鲁》是一款游戏作品。它既有类似《宝可梦》的宠物，又有 FPS 战斗系统。在游戏中，玩家可以培养“帕鲁”，使其战斗、繁殖、耕种、制造，还可以出售帕鲁，甚至将其制作成食物。在广阔的世界中收集神奇的生物“帕鲁”，派他们进行战斗、建造、做农活，工业生产等，这是一款支持多人游戏模式的全新开放世界生存制作游戏。帕鲁可以进行战斗、繁殖、协助玩家做农活，也可以为玩家在工厂工作。玩家也可以将它们进行售卖，或肢解后食用。_是否开启神秘的unko事件
随便推点
华为欧拉系统OpenEuler安装telnet_欧拉telnet命令-程序员宅基地
文章浏览阅读745次，点赞2次，收藏2次。华为欧拉系统OpenEuler安装telnet_欧拉telnet命令
Python开发－模块开发和常用模块-程序员宅基地
文章浏览阅读1.1k次，点赞27次，收藏9次。math.log(x[, base]):计算x的自然对数,如果提供了base,则计算以base为底的x的对数。random 模块还提供了一些其他的函数,如 random.gauss() 用于生成符合高斯分布的随机数,random.expovariate() 用于生成符合指数分布的随机数等。（2）datetime(year, month, day, hour=0, minute=0, second=0, microsecond=0): 创建一个指定日期和时间的 datetime 对象。
Android 天气APP（二十一）滑动改变UI，2024年最新android开发教程视频孙老师-程序员宅基地
文章浏览阅读564次，点赞8次，收藏13次。这次面试问的还是还是有难度的，要求当场写代码并且运行，也是很考察面试者写代码因为Android知识体系比较庞大和复杂的，涉及到计算机知识领域的方方面面。在这里我和身边一些朋友特意整理了一份快速进阶为Android高级工程师的系统且全面的学习资料。涵盖了Android初级——Android高级架构师进阶必备的一些学习技能。
Matlab：整数加减乘除及取余运算_matlab整除和取余-程序员宅基地
文章浏览阅读3.5k次，点赞3次，收藏6次。通过以上源代码的演示，我们可以发现，在Matlab中进行整数加减乘除及取余运算都非常简单。通过灵活运用这些运算，我们可以轻松地进行数学计算和模拟，从而得到更准确的结果。Matlab是一款强大的数学计算软件，其拥有丰富的数值计算功能。在Matlab中，我们可以进行整数加、减、乘、除及取余等运算操作。运行后结果为300，即将a和b两个整数进行加法运算后得到的结果。运行后结果为100，即用a减去b得到的差。运行后结果为200，即a乘以b的积。运行后结果为50，即a除以b的商。运行后结果为1，即a除以b的余数。_matlab整除和取余
JAVA记录媒体视频播放进度开发 (实例干货)_dateutils.truncatedcompareto()-程序员宅基地
文章浏览阅读7k次，点赞15次，收藏89次。搭建环境：springBoot + apache-maven-3.6.3 + mysql + Redisson3.15.4 项目背景 项目需要做一个记录视频播放进度的功能，有以下几点需要着重注意：点击视频，播放到几小时几分几秒，下次同一个人点击进来依然是当前时间段 当一个维度下有多个视频可以看，分开记录当前视频或者文档是否已经看完。比如学习维度下有两个视频，一个文档，文档或者视频看完，直接显示当前视频已看完，但学习维度还显示正在学习，除非当前维度下的所有视频或者文档全部显示为已学完。 文档_dateutils.truncatedcompareto()
[JavaScript][异步]Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？_7、promise构造函数是同步执行还是异步执行,那么 then 方法呢?-程序员宅基地
文章浏览阅读2.3k次，点赞3次，收藏3次。const promise = new Promise((resolve, reject) => { console.log(1) resolve() console.log(2)})promise.then(() => { console.log(3)})console.log(4)执行结果是：1243promise构造函数是同步执行的，then方法是异步执行的..._7、promise构造函数是同步执行还是异步执行,那么 then 方法呢?