链接渐变效果

链接渐变效果是一种常用的视觉效果，可以让网页中的链接更加生动有趣。下面是链接渐变效果的完整攻略。

HTML代码

首先，需要添加HTML代码来创建链接。以下是一个简单的例子：

<a href="https://www.example.com/">Example Link</a>

在 <a> 标签中，href 属性表示链接的目标URL，Example Link 是链接的文本内容。

CSS代码

接下来，使用CSS代码添加链接渐变效果。以下是一个基本的样式模板：

a {
  color: #4e4e4e; /*链接的默认颜色*/
  text-decoration: none; /*去除下划线*/
  position: relative;/*显示链接渐变层*/
}

a:before {
  content: "";/*伪元素*/
  position: absolute;/*定位于链接上面*/
  width: 100%;/*宽度为链接的100%*/
  height: 2px;/*高度为2像素，也可以自行修改*/
  bottom: 0; /*链接下方*/
  left: 0; /*链接左侧*/
  background-color: #f5634a;/*渐变的起始颜色*/
  transition: all 0.3s cubic-bezier(0.25, 0.45, 0.45, 0.95);/*渐变效果的时间及速度*/
  opacity: 0;/*渐变层的不透明度为0*/
}

a:hover:before {
  opacity: 1;/*鼠标移入链接时，使渐变层显示*/
  width: 0;/*使渐变层的宽度从0开始*/
}

修改上述代码中的颜色和尺寸等属性，以及使用其他的CSS效果，就可以更改链接的渐变效果。

以下是两个示例：

示例1：

a {
  color: #000;
  text-decoration: none;
  position: relative;
}

a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background: #fdff00; /*渐变背景色*/
  background: linear-gradient(to right, #fdff00 0%, #ff00c0 100%); /*左右渐变色*/
  transition: all 0.3s cubic-bezier(0.25, 0.45, 0.45, 0.95);
  opacity: 0;
}

a:hover:before {
  opacity: 1;
  width:0;
}

示例1效果展示：链接渐变效果示例1

示例2：

a {
  color: #000;
  text-decoration: none;
  position: relative;
}

a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -5px; /*离链接的距离*/
  left: 0;
  background: #00c26f; /*渐变背景色*/
  background: linear-gradient(to right, #00c26f 0%, #f7b733 100%); /*左右渐变色*/
  transition: all 0.3s cubic-bezier(0.25, 0.45, 0.45, 0.95);
  opacity: 0;
  transform: scaleX(0.2); /*初始宽度为链接的0.2倍*/
}

a:hover:before {
  opacity: 1;
  transform: scaleX(1); /*鼠标移入链接时，使渐变层宽度变为1*/
}

示例2效果展示：链接渐变效果示例2

以上是链接渐变效果的完整攻略，希望对你有所帮助。