Question

当我将鼠标悬停在文本上时，我一直试图将颜色填充的效果设置为文本，但是没有成功。

HTML

<a href="#" data-hover="Fill Color On Text">Fill Color On Text</a>

CSS

a {
  color: #000;
  text-decoration: none;
  transition: all 0.5s;
  position: relative;
  overflow: hidden;
  display: block;
  backface-visibility: hidden;
  background: white;
  font-size:40px;

}

a:before {
  content: attr(data-hover);
  position: absolute;
  color: red;
  left: -100%;
  transition: all 0.5s;
  background: white;
    backface-visibility: hidden;
}
a:hover:before {
  left: 0;
}

DEMO

Answer 1

使用现有标记，您只需将过渡属性更改为width而不是

＆＃13;

body {
  font-size: 40px;
}
a {
  color: #000;
  text-decoration: none;
  position: relative;
  display: block;
  font-size:40px; 
}
a:before {
  content: attr(data-hover);
  position: absolute;
  color: red;
  left: 0;
  width: 0;
  transition: width 1s;
  overflow: hidden;
  white-space: nowrap;
}
a:hover:before {
  width: 100%;
}

＆＃13;

<a href="#" 
   data-hover="Fill Color On Text">Fill Color On Text</a>

＆＃13;

如果你同时使用两个伪元素，那么你不必写两次文本

＆＃13;

body {
  font-size: 40px;
}
a {
  color: #000;
  text-decoration: none;
  position: relative;
  display: block;
  font-size:40px; 
}
a:before {
  content: attr(data-hover);
}
a:after {
  content: attr(data-hover);
  position: absolute;
  color: red;
  left: 0;
  width: 0;
  transition: width 1s;
  overflow: hidden;
  white-space: nowrap;
}
a:hover:after {
  width: 100%;
}

＆＃13;

<a href="#" 
   data-hover="Fill Color On Text"></a>

＆＃13;

Answer 2

如果您正在寻找CSS3悬停链接效果，请尝试以下代码或访问https://jsfiddle.net/aice09/r5vv189p/1/。如果您正在寻找更多效果，请访问https://tympanus.net/codrops/2015/05/13/inspiration-for-text-styles-and-hover-effects/和https://designmodo.com/css3-hover-effects/。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Animate Text</title>
</head>
<body>
      <a href="javascript:;" onclick="window.location.href = '#!'" class="animatetext"> <span data-text="Demo 1">Demo 1</span></a>
      <a href="javascript:;" onclick="window.location.href = '#!'" class="animatetext"><span data-text="Demo 2">Demo 2</span></a>
      <a href="javascript:;" onclick="window.location.href = '#!'" class="animatetext"><span data-text="Demo 3">Demo 3</span></a>
      <a href="javascript:;" onclick="window.location.href = '#!'" class="animatetext"><span data-text="Demo 4">Demo 4</span></a>
</body>
</html>
<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Arvo');

body{
  font-family: 'Arvo', serif;
  font-weight: bold;
}

.animatetext {
  color: #fff;
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
  vertical-align: top;
   background: #1C3044;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  -ms-perspective: 600px;
  perspective: 600px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

 .animatetext:hover span {
  background: #314559;
  -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  -moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  -ms-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}

  .animatetext span {
  display: block;
  position: relative;
  padding: 10px 20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

 .animatetext span:after {
  content: attr(data-text);
  -webkit-font-smoothing: antialiased;
  padding: 10px 20px;
  color: #fff;
  background: #0e6957;
  display: block;
  position: absolute;

  left: 0;
  top: 0;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  -moz-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  -ms-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
}
</style>

Answer 3

如果您正在寻找颜色填充，可以通过简单的悬停来完成。

HTML：

<a href="#" data-hover="Fill Color On Text">Fill Color On Text</a>

的CSS

    a {
  color: #000;
  text-decoration: none;
  transition: all 0.5s;
  position: relative;
  overflow: hidden;
  display: block;
  backface-visibility: hidden;
  background: white;
  font-size:40px;
  transition:all 0.25s;
}
a:hover{
  color: red;
}

您不需要在选择器之后使用简单的颜色填充

Codepdn link for example

文本颜色填充CSS过渡

3 个答案: