Javascript 文本颜色填充CSS转换_Javascript_Jquery_Css_Css Transitions

Javascript 文本颜色填充CSS转换

javascript jquery css

Javascript 文本颜色填充CSS转换,javascript,jquery,css,css-transitions,Javascript,Jquery,Css,Css Transitions,我一直试图在鼠标悬停在文本上时获得颜色填充的效果，但没有成功 HTML 如果您正在寻找颜色填充，可以通过简单的悬停来完成 HTML: 简单的颜色填充不需要前后选择器如果您正在寻找CSS3悬停链接效果，请尝试以下代码或访问。如果你正在寻找更多的效果，请访问设置文本动画 @导入url（'https://fonts.googleapis.com/css?family=Arvo'); 身体{ 字体系列：“Arvo”，衬线；字体大小：粗体； } .animatetext{ 颜色：#fff；显示：

我一直试图在鼠标悬停在文本上时获得颜色填充的效果，但没有成功

HTML

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

HTML:

简单的颜色填充不需要前后选择器

如果您正在寻找CSS3悬停链接效果，请尝试以下代码或访问。如果你正在寻找更多的效果，请访问


设置文本动画
@导入url（'https://fonts.googleapis.com/css?family=Arvo');
身体{
字体系列：“Arvo”，衬线；
字体大小：粗体；
}
.animatetext{
颜色：#fff；
显示：内联块；
文字装饰：无；
溢出：隐藏；
垂直对齐：顶部；
背景：#1C3044；
-webkit透视图：600px；
-moz透视图：600px；
-ms透视图：600px；
透视图：600px；
-webkit透视图来源：50%50%；
-moz透视原点：50%50%；
-ms透视图来源：50%50%；
透视来源：50%50%；
}
.animatetext：悬停范围{
背景#314559；
-webkit转换：translate3d（0px，0px，-30px）旋转（90度）；
-moz变换：translate3d（0px，0px，-30px）rotateX（90度）；
-ms变换：translate3d（0px，0px，-30px）旋转（90度）；
变换：translate3d（0px，0px，-30px）旋转（90度）；
}
.animatetext span{
显示：块；
位置：相对位置；
填充：10px 20px；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-ms转换：所有0.3秒轻松；
过渡：所有0.3秒缓解；
-webkit转换来源：50%0%；
-moz变换原点：50%0%；
-ms变换原点：50%0%；
变换原点：50%0%；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-ms变换样式：preserve-3d；
变换样式：保留-3d；
}
.animatetext span:之后{
内容：attr（数据文本）；
-webkit字体平滑：抗锯齿；
填充：10px 20px；
颜色：#fff；
背景#0e6957；
显示：块；
位置：绝对位置；
左：0；
排名：0；
-webkit转换来源：50%0%；
-moz变换原点：50%0%；
-ms变换原点：50%0%；
变换原点：50%0%；
-webkit转换：translate3d（0px，105%，0px）旋转（-90度）；
-moz变换：translate3d（0px，105%，0px）rotateX（-90度）；
-ms变换：translate3d（0px，105%，0px）rotateX（-90度）；
变换：translate3d（0px，105%，0px）旋转（-90度）；
}

使用现有标记，只需将转换属性改为

宽度

正文{
字体大小：40px；
}
a{
颜色：#000；
文字装饰：无；
位置：相对位置；
显示：块；
字体大小：40px；
}
a:以前{
内容：attr（数据悬停）；
位置：绝对位置；
颜色：红色；
左：0；
宽度：0；
过渡：宽度1s；
溢出：隐藏；
空白：nowrap；
}
a:悬停：在之前{
宽度：100%；
}

为什么不在

上更改颜色呢：悬停而不是使用：beforepseudo？尝试获得从左到右的颜色填充效果。如果从#000到#f00，这是最好的选择，但是当我使用它从#fff到#f00时，字体上会有一个黄色边框。“知道怎么解决吗？”@MarcelGrüger不知道。在上面的示例中，我改为黑色正文和白色文本，并且没有可见的黄色边框。
<a href="#" data-hover="Fill Color On Text">Fill Color On Text</a>

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;
}

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

    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;
}

<!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>