CSS伪类实现遮罩层效果

最新推荐文章于 2023-10-01 16:52:41 发布

weixin_46341003

最新推荐文章于 2023-10-01 16:52:41 发布

阅读量702

点赞数 1

原文链接：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中的伪类可以更方便的帮助我们定义过渡效果，这里，我们详细介绍一下利用: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

weixin_46341003

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS伪类实现遮罩层效果

CSS中的伪类可以更方便的帮助我们定义过渡效果，这里，我们详细介绍一下利用:hover实现遮罩层效果。:hover是指当鼠标悬停在元素上时所发生的效果。实现遮罩层的步骤需要两个相等大小的元素。两个元素的位置应该相同。遮罩层元素应该为黑色背景，白色字体。鼠标在未悬浮到元素之上时，遮罩层应该透明。鼠标在悬浮到元素之上时，应该减少遮罩层的透明度。为遮罩层加上过渡时间。效果展示色彩因为录制gif时出现了偏差，但能说明原理。代码实现<!DOCTYPE html><html l
复制链接

扫一扫