css3 橡皮擦效果

在Web开发中，CSS3提供了许多有趣的效果，其中之一就是橡皮擦效果。通过使用CSS3的属性和伪元素，我们可以使元素在鼠标滑过时显示隐藏的内容，就像橡皮擦擦掉一样。下面我们来看一下如何实现这个有趣的效果。

// HTML结构div class="wrapper">
    div class="eraser">
    p>
    橡皮擦效果/p>
    p class="hidden">
    这是被擦掉的内容/p>
    /div>
    /div>
// CSS样式.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}
.eraser {
    position: relative;
    width: 200px;
    height: 100px;
}
.eraser p {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 100px;
    text-align: center;
    font-size: 20px;
    background-color: #333;
    color: #fff;
    transition: all 0.5s;
}
.eraser p.hidden {
    background-color: #fff;
    color: #333;
    z-index: 2;
    opacity: 0;
    transition: all 0.5s;
}
.eraser:hover p {
    opacity: 0;
}
.eraser:hover p.hidden {
    opacity: 1;
}
    

在上面的代码中，我们首先创建了一个包含橡皮擦效果的div，其中包含了两个p标签，一个标签是显示的内容，其中包含了“橡皮擦效果”的文本，另一个标签是隐藏的内容，其中包含了“这是被擦掉的内容”的文本。我们通过设置类名为hidden的p标签的背景颜色为白色，文字颜色为黑色，并设置其z-index为2，使其位于显示的p标签上方。我们通过设置橡皮擦效果的div的position为relative，使其内部的元素可以使用绝对定位，同时设置其宽度和高度。我们在两个p标签的样式中设置其position为absolute，使用top和left属性使其始终在div内部的左上角，使用width和height属性让其大小和div一致，使用line-height和text-align属性使其居中显示。我们使用transition属性设置其透明度变化时的过渡效果。最后，我们使用:hover伪类选择器来使显示的p标签的透明度为0，同时使隐藏的p标签的透明度为1，从而达到橡皮擦效果的效果。

总的来说，CSS3的橡皮擦效果可以为Web开发增添一些趣味性和交互性。通过使用CSS3的属性和伪元素，我们可以在不使用JavaScript的情况下实现这个效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！