CSS 实现鼠标悬停时显示下半部分隐藏文本

cssweb developmentfront end technology更新于 2024/5/12 15:08:17

在网页设计中，字体排印的作用是吸引用户、传达信息并创造视觉效果。与印刷字体排印相比，数字字体排印赋予网页设计师更大的灵活性和灵活性。它是用户界面设计中至关重要的元素。它有助于构建强大的视觉层次，确立网站的总体基调，并实现良好的美学平衡。

除了提高可读性和可访问性之外，字体排印还应用于启发用户。在本文中，我们将讨论如何创建一种效果，使文本的下半部分隐藏，并在光标悬停在其上时显示。

使用的属性

以下是我们在示例中使用的属性 -

Clip-path 属性 - clip-path CSS 属性用于创建剪切路径，它是一个非矩形区域，用于定义元素的可见区域。该属性用于隐藏元素中超出剪切路径的部分，从而实现以前只能通过图像蒙版或 SVG 实现的复杂形状和效果。
CSS Transition 属性 - transition CSS 属性用于在不同的 CSS 样式或属性值之间创建平滑的动画过渡。将过渡应用于元素时，它会指定持续时间、计时函数、延迟以及要过渡的属性。此属性可应用于各种 CSS 属性，包括背景颜色、不透明度、变换等。

HTML 示例

我们从一个简单的 HTML 结构开始，该结构由一个容器元素和一个隐藏文本 div 组成。容器元素只是隐藏文本 div 和文本"鼠标悬停在此文本上即可显示"的包装器。

容器元素的 position 属性为 relative，这对于 absolutely 定位的隐藏文本 div 相对于它进行定位是必需的。隐藏文本 div 的 position 设置为 absolute，这允许我们将其定位在容器元素的顶部。
隐藏文本 div 的 top、left、right 和 bottom 均为 0，这使其位于容器元素的左上角，并拉伸以覆盖整个容器元素。bottom 设置为 50%，这将隐藏隐藏文本 div 的下半部分。
隐藏文本 div 的 background-color 设置为 white，color 设置为 orange。font-size 设置为 30px，这使文本更大，更易于阅读。 text-align 设置为 center，使文本水平居中。line-height 设置为 200%，增加文本行之间的垂直间距。
clip-path 属性设置为一个多边形，用于隐藏隐藏文本 div 的下半部分。它由四个点组成，构成一个矩形:0 0(左上)、100% 0(右上角)、100% 100%(右下)和 0% 100%(左下)。
transition 属性用于在 JavaScript 中更改 clip-path 时创建平滑过渡。

<!DOCTYPE html>
<html>
<head>
   <title> Mouse hover effects on text </title>
   <style>
      body {
         background-color: cyan;
         margin: 10px;
         padding: 5px;
      }
      .container {
         position: relative;
      }
      .hidden-text {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         font-size: 30px;
         font-family: algerian;
         color: orange;
         background-color: white;
         opacity: 0;
         transition: opacity 0.3s ease-in-out;
      }
      .container:hover .hidden-text {
         opacity: 1;
         clip-path: circle(0 at 0 0);
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="hidden-text">This is the hidden text. </div>
      <h1> Hover over this text to reveal it with a circular mask. </h1>
   </div>
</body>
</html>

Java 脚本示例

以下是 JavaScript 代码 -

此代码为 .container 元素的 mousemove 事件设置了一个事件监听器。当用户在容器内移动鼠标时，事件监听器的回调函数就会被执行。
在回调函数中，代码选择了 .hidden-text 元素，也就是我们希望在鼠标悬停时显示的元素。然后，使用 polygon() 函数创建变量 clipPath 来定义剪切路径的形状。
多边形使用四个坐标定义，分别代表剪切路径的四个角。前两个坐标始终为 0 0，代表元素的左上角。第三个坐标 100% ${100 - e.clientY / window.innerHeight * 100}%, 表示剪切路径的右下角。

100% 表示元素的右边缘，100 - e.clientY / window.innerHeight * 100 计算鼠标相对于元素高度的垂直位置，并将其从 100 中减去，以确保剪切路径从元素底部向上延伸。

第四个坐标为 0% ${100 - e.clientY / window.innerHeight * 100}%,，表示剪切路径的左下角。 0% 表示元素的左边缘，100 - e.clientY / window.innerHeight * 100 计算鼠标相对于元素高度的垂直位置。

最后，将 .hidden-text 元素的 style.clipPath 属性设置为 clipPath 变量，该变量将剪切路径应用于元素，并在鼠标向上移动时显示文本的下半部分。

JavaScript 代码向容器元素添加了一个事件监听器，用于监听 mousemove 事件。当鼠标移动到容器上方时，隐藏文本 div 的 clip-path 会根据鼠标的位置动态更改。

<script>
   const container = document.querySelector('.container');
   container.addEventListener('mousemove', (e) => {
      const hiddenText = document.querySelector('.hidden-text');
      hiddenText.style.clipPath = `circle(50px at ${e.offsetX}px ${e.offsetY}px)`;
   });
</script>

示例

以下是完整的示例 -

<!DOCTYPE html>
<html>
<head>
   <title> Mouse hover effects on text </title>
</head>
<style>
   body {
      background-color: cyan;
      margin: 10px;
      padding: 5px;
   }
   .container {
      position: relative;
   }
   .hidden-text {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      font-size: 30px;
      font-family: algerian;
      color: orange;
      background-color: white;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
   }

   .container:hover .hidden-text {
      opacity: 1;
      clip-path: circle(0 at 0 0);
   }
</style>
<script>
   const container = document.querySelector('.container');
   container.addEventListener('mousemove', (e) => {
   const hiddenText = document.querySelector('.hidden-text');
   hiddenText.style.clipPath = `circle(50px at ${e.offsetX}px ${e.offsetY}px)`;
   });
</script>
<body>
   <div class="container">
      <div class="hidden-text">This is the hidden text. </div>
      <h1> Hover over this text to reveal it with a circular mask. </h1>
   </div>
</body>
</html>