CSS伪类实现遮罩层效果

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

实现遮罩层的步骤

  1. 需要两个相等大小的元素。
  2. 两个元素的位置应该相同。
  3. 遮罩层元素应该为黑色背景,白色字体。
  4. 鼠标在未悬浮到元素之上时,遮罩层应该透明。
  5. 鼠标在悬浮到元素之上时,应该减少遮罩层的透明度。
  6. 为遮罩层加上过渡时间。

效果展示

色彩因为录制gif时出现了偏差,但能说明原理。
CSS伪类实现遮罩层效果_第1张图片

代码实现


<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>Documenttitle>
    <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>

你可能感兴趣的:(CSS伪类实现遮罩层效果)