css3触碰显示文字

CSS3是一种能够为网页带来更好视觉体验的技术，其中一个非常好的特性就是触碰显示文字。触碰显示文字即当鼠标经过文字时，会显示出更多的信息或描述，让用户获得更多的内容。下面我们来看看如何实现这个特性。

HTML 代码：

<div class="Box">
  <p>这是一段普通的文字，当鼠标经过时会显示出更多的内容。</p>
  <p class="description">这里是描述文字。</p>
</div>

首先，我们需要一个包裹文字的div，其中包含一个普通的段落和一个拥有更多描述信息的段落。接着，在CSS中定义.Box的样式：

CSS 代码：

.Box {
  position: relative;
  display: inline-block;
}

.description {
  position: absolute;
  top: -30px;
  left: 0;
  background-color: #333;
  color: #fff;
  padding: 10px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.Box:hover .description {
  opacity: 1;
}

CSS代码主要分为三部分，第一部分定义.Box的基本样式，因为我们需要在其中使用position定位和opacity属性，所以需要将其设置为relative。第二部分是定义.description的样式，包括它的位置、背景颜色、内边距、颜色等。其中，我们使用了opacity将其初始设置为不可见，并使用transition来添加渐变动画效果。最后一部分是针对鼠标悬停的效果，将.description的opacity值设置为1，让它显示出来。

通过以上CSS代码的设置，我们就可以轻松实现触碰显示文字的效果了。