Question

我尝试动画（从左到右）在页面加载时出现转换延迟的下划线。我知道如何让它在悬停时工作，但不是在加载时。尝试这样的事情但不确定为什么它不会起作用。

.under {
    position: relative;
    text-decoration: none;
    display: inline-block;
}
.under::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    -webkit-transition-delay: 2s; 
    transition-delay: 2s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

Answer 1

在尝试达到您正在寻找的效果时，有两点需要注意：

text-decoration属性无法设置动画，以便下划线从左到右。
CSS transition只有在状态发生变化时才会触发（由于用户交互，例如悬停，点击等或由于JavaScript像setTimeout）。如果您需要在页面加载时进行动画，则应使用带有animation规则的CSS @keyframes。

作为旁注，在您的代码中，transition-delay在transition属性之前添加，而short-hand属性的延迟值为0s。由于这在CSS中稍后出现，它将覆盖之前指定的transition-delay: 2s。

如何实现这种效果？

这是一个你想要实现的相当简单的效果，因此不需要SVG。如果下划线弯曲（或）像弧一样，我建议使用SVG。

使用伪元素：

在下面的代码片段中，我使用了一个伪元素并将其定位，使其生成一条看起来像文本下划线的线条。通过将伪元素width设置为0-100％的动画，可以实现所需的效果。伪元素的height确定边框粗细，background-color确定边框的颜色。

＆＃13;

.underline {
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
  margin-bottom: 10px;
}
.underline:after {
  position: absolute;
  content: '';
  bottom: -2px;
  left: 0px;
  height: 2px;
  width: 0%;
  background-color: red;
  animation: underline 2s ease-in-out 2s infinite; /* remove infinite if you want only once */
}
@keyframes underline {
  to {
    width: 100%;
  }
}

＆＃13;

<div class='underline'>Some underlined text</div>
<br>
<div class='underline'>Some lengthy underlined text</div>

＆＃13;

使用线性渐变：

使用linear-gradient图像作为元素的背景也可以实现同样的目的。这里，X轴中的background-size的动画范围为0％ - 100％。 Y轴中的background-size确定边框粗细，linear-gradient确定边框颜色。

＆＃13;

.underline {
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
  margin-bottom: 10px;
  background: linear-gradient(to right, red, red);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  animation: underline 2s ease-in-out 2s infinite; /* remove infinite if you want only once */
}
@keyframes underline {
  to {
    background-size: 100% 2px;
  }
}

＆＃13;

<div class='underline'>Some underlined text</div>
<br>
<div class='underline'>Some lengthy underlined text</div>

＆＃13;

Answer 2

编辑代码以创建从左到右的行。这是一个SVG线，因此它不像常规div边框或下划线那样易于操作，但动画有效。试一试。

HTML

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="4cm" height="4cm" viewBox="0 0 0 0"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
    <title>Underline</title>
    <desc>Underline</desc>

    <line id="lineSVG" x1="0" y1="20" x2="100" y2="20" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

<svg xml:space="preserve">
    <use class="under" xlink:href="#lineSVG" />
</svg>

CSS

.under {
    position: relative;
    display: inline-block;
    animation: DrawLine;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    animation-duration: 2s; 
    stroke-dashArray: 1500;
    stroke-dashoffset: 1500;
}

@keyframes DrawLine {
    to { stroke-dashOffset: 0; }
}

动画CSS延迟下划线

2 个答案:

如何实现这种效果？