鼠标悬停时CSS中底部一半的隐藏文本显露出来

在网页设计中，排版被用于吸引人们、传达信息和产生视觉效果。与印刷排版相比，数字排版允许网页设计师更加自由和灵活。它是用户界面设计中的关键元素。它有助于建立强大的视觉层次结构，确定网站的整体语气，并保持良好的美学平衡。

除了提高可读性和可访问性，排版还应该用于启发人们。在本文中，我们将讨论如何创建一个效果，即当光标悬停在文本上时，文本的底部一半将被隐藏，并在光标悬停时显示出来。

使用的属性

下面是我们在示例中使用的属性：

Clip-path属性 - clip-path CSS属性用于创建剪辑路径，即定义元素可见区域的非矩形区域。该属性用于隐藏元素中超出剪辑路径的部分，允许使用复杂的形状和效果，以前只能使用图像遮罩或SVG实现。
CSS过渡属性 - 过渡CSS属性用于在不同的CSS样式或属性值之间创建平滑的动画过渡。当一个过渡应用于一个元素时，它指定了持续时间、时间函数、延迟和正在过渡的属性。该属性可以应用于各种CSS属性，包括背景颜色、透明度、变换等。

示例HTML

我们从一个简单的HTML结构开始，包括一个容器元素和一个隐藏文本div。容器元素只是一个隐藏文本div的包装器，文字是“将鼠标悬停在此处以显示它”。

容器元素具有 relative 的position属性，这是隐藏文本div绝对位置的前提条件。隐藏文本div具有 absolute 的position属性，这使我们可以将其放置在容器元素上方。
隐藏文本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% （左下角）。
在JavaScript中，使用transition属性创建平滑的过渡效果，当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 Script

以下是JavaScript代码 –

此代码在 mousemove 事件上为 .container 元素设置了事件监听器。当用户在容器内移动鼠标时，将执行事件监听器的回调函数。
在回调函数中，代码选择了 .hidden-text 元素，这是我们想要在mouseover时显示的元素。然后，使用 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事件。当鼠标移动到容器上时，hidden-text 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>