Question

我已经尝试过不同风格的文字背景悬停效果但不是这一个。

以下链接是我正在谈论的内容。

http://i.imgur.com/Dw01GKm.gif

为了描述我想要实现的目标，当锚链接处于悬停状态时，背景颜色开始出现在其背面，就像进度条一样，以填充文本的宽度顺利（我生成的gif质量很差，这就是为什么它不顺畅）。

我在www.webdesignerdepot.com中看到了这种效果，我试图重新创建它，但不知道如何做到这一点。

<A href="#">
   Hello World! 
</a>

a {font-size:60px; font-weight: bolder; color:#121212; text-decoration:none;}
a:hover {background:orange;}

Answer 1

＆＃13;

a{
  font-size: 60px;
  font-weight: bolder;
  color: #121212;
  text-decoration: none;
  background-position: 0 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, orange 50%);
  transition: background-position 0.5s ease-out 0s;
  background-size: 200.22% auto;
}

a:hover{
  background-position: -99.99% 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, orange 50%);
}

＆＃13;

<a href="#">
  Hello World! 
</a>

＆＃13;

JSFiddle

CSS3文本悬停效果像进度条一样移动背景

1 个答案: