[分享]css3文字点击手图案

CSS3是一种让网页变的更加美观和有趣的样式语言，它有许多强大的功能，其中之一就是可以创建精美的文字点击手图案。使用CSS3的伪元素和一些样式属性，我们可以轻松地实现这个效果。a { : relati...

CSS3是一种让网页变的更加美观和有趣的样式语言，它有许多强大的功能，其中之一就是可以创建精美的文字点击手图案。使用CSS3的伪元素和一些样式属性，我们可以轻松地实现这个效果。

a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 1rem;
  color: #fff;
  background-color: #0077cc;
  border-radius: 0.25rem;
}

a:before {
  content: ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

a:after {
  content: ';
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.75rem;
  height: 0.75rem;
  background-color: #fff;
  border-top: 1px solid #0077cc;
  border-right: 1px solid #0077cc;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s ease;
}

a:hover:before {
  opacity: 0.5;
}

a:hover:after {
  width: 1rem;
  height: 1rem;
} 

在上面的代码中，我们首先为链接添加了一些基本的样式，如背景色、边框半径等。然后，我们使用:before伪元素创建了一个白色的水平线，作为链接文字的下划线，通过transform将其垂直居中。同时它的opacity属性值为0，即透明度为0，意味着一开始不会显示出来。当链接被鼠标悬浮时，我们通过:hover伪类将它的opacity属性值改为0.5，从而让这根水平线逐渐出现出来。

接下来，我们又使用了:after伪元素创建了一个白色的正方形，作为点击手图案。我们将它设置在链接文字的右侧，并通过transform和border属性让它变成一个旋转的45度的菱形。同样地，当链接被鼠标悬浮时，我们通过:hover伪类将它的宽度和高度属性值增大，从而让这个菱形看起来像是在被点击。

这样，一个简单的CSS3文字点击手图案就完成了。我们可以通过修改一些属性，如颜色、大小、形状等，来创建更加独特的图案。希望这篇文章能对大家有所启发，让CSS3的创造力变得更加无限。