Question

我也在尝试在移动设备上对此下划线制作动画（单击），但我只想使用CSS制作它。

我试图以某种方式延迟点击，以使动画完全加载到点击上。

.un {
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(#000, #000);
  background-position: right -100% bottom 0;
  background-size: 200% 2px;
  background-repeat: no-repeat;
}

.un:hover {
  background-position: left -100% bottom 0;
  transition: background-position 0.5s;
}

.un:active {
  background-position: left -100% bottom 0;
  transition: background-position 0.5s;
}

<span class="un">Underlined Text</span>

Answer 1

您可以尝试使用:focus伪选择器-为了使其正常工作，您需要为span提供一个制表符索引：

.un {
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(#000, #000);
  background-position: right -100% bottom 0;
  background-size: 200% 2px;
  background-repeat: no-repeat;
}

.un:focus {
  background-position: left -100% bottom 0;
  transition: background-position 0.5s;
  outline:none;
}

<span class="un" tabindex="0">Underlined Text</span>

Answer 2

您可以保持悬停并在其他背景下使用活动对象，但是仅在按下键时动画才能起作用。您可以减少持续时间，以确保结束。

通过这种方式，您将确保具有悬停动画和单击声：

.un {
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(#000, #000);
  background-position: right -100% bottom 0;
  background-size: 200% 2px;
  background-repeat: no-repeat;
  position:relative;
  z-index:0;
}

.un:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;  
  background-position: right -100% bottom 0;
}

.un:hover,
.un:active:before {
  background-position: left -100% bottom 0;
  transition: background-position 0.5s;
}

<span class="un">Underlined Text</span>

或将:active替换为:focus，但您需要注意大纲和Tab键：

.un {
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(#000, #000);
  background-position: right -100% bottom 0;
  background-size: 200% 2px;
  background-repeat: no-repeat;
  position:relative;
  z-index:0;
  outline:none;
}

.un:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;  
  background-position: right -100% bottom 0;
}

.un:hover,
.un:focus:before {
  background-position: left -100% bottom 0;
  transition: background-position 0.5s;
}

<span class="un" tabindex="-1">Underlined Text</span>

没有伪元素和多个背景的另一种语法：

.un {
  display: inline-block;
  padding-bottom: 2px;
  background-image: 
    linear-gradient(#000, #000),
    linear-gradient(#000, #000);
  background-position: 
    right -100% bottom 0,
    right -100% bottom 0;
  background-size: 200% 2px;
  background-repeat: no-repeat;
  position:relative;
  z-index:0;
  outline:none;
}
.un:hover {
  background-position: 
    left -100% bottom 0,
    right -100% bottom 0;
  transition: background-position 0.5s;

}
.un:focus {
  background-position: 
    left -100% bottom 0,
    left -100% bottom 0;
  transition: background-position 0.5s;
}

<span class="un" tabindex="-1">Underlined Text</span>

仅使用CSS即可在点击时对下划线进行动画处理

2 个答案: