仅使用HTML和CSS将文本元素替换为淡入淡出动画

debugcn 发表于 Dev

罗马书

我试图输入一个像“ hello”这样的词，然后单击它时，它会淡出，并且会出现一个新词。

有什么办法只能使用HTML和CSS来做到这一点吗？如果没有，我想我将不得不学习javascript和/或jquery。

垫料

您可以使用选择器和html元素尝试实现所需的wat，这就是我所做的。

我使用了CSS伪类（在这里您可以找到带有相对解释的伪类列表）

伪类用于检测元素的特殊状态，例如:hover检测鼠标悬停元素的（我认为是最常用的）伪类。

在这种情况下，我使用了

:focus：这将选择具有焦点的元素（例如，当您单击链接时，单击链接时，它会在单击和输入时获得焦点，因此，如果单击输入，它将获得焦点。）
:visited：用于检测访问的链接，不幸的是，此选择器具有特殊的行为，因为它可以用于侵犯用户隐私，因此您无法基于已访问的链接正确设置其他元素的样式（这就是我尝试做的这里）

<a href="#" id="first">
hello
</a>



<a href="#" id="second">
hello
</a>

<style type="text/css">
#first{
  text-decoration: none;
  color: black;
  opacity: 1;
  outline: none;
  transition: opacity 1s;
}

#first:visited{
	opacity: 0;
}

#first:focus{
  opacity: 0;
}
#second:focus{
  outline:none
}
#second{
  opacity: 0;
  text-decoration: none;
  color: black;
  transition: opacity 1s;
}

#first:focus + #second{
  opacity: 1;
}

#first:visited ~ #second{
  opacity: 1;
}

</style>

不幸的是，当用户单击另一个元素时，先前的文本会返回

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。