Question

我有一个背景设置为颜色的元素

在悬停时，背景设置为radial-gradient

我想在悬停时在颜色之间进行转换，但是会在我的元素消失一秒钟时产生奇怪的效果。

这是链接

是否可以在颜色和渐变之间切换而不会出现此问题？

.link {
  display: block;
  position: absolute;
  bottom: 20%;
  padding: 0 25px;
  height: 42px;
  line-height: 42px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  background: red;
  color: white;
  transition: all 0.3s ease-in-out;
}

.link:hover {
  text-decoration: none;
  background: radial-gradient(98px 98px at center center, red 0%, #0088b5 100%);
}

Answer 1

您可以使用背景尺寸玩游戏

.link {
  display: inline-block;
  padding: 0 25px;
  line-height: 42px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  background-image: radial-gradient(circle,red 0%, #0088b5 100%);
  background-position:center;
  background-size:600% 600%; /*a big size to see only the red*/
  color: white;
  text-decoration: none;
  
  transition: all 0.3s ease-in-out;
}

.link:hover {
  background-size:150% 150%; /* reduce the size to see the gadient effect*/
}

<div class="link">Link</div>

Answer 2

您可以将:before伪元素与背景色的不透明度一起使用，以获得这种效果。

信用：Dave Lunny。

还要检查this previous question。

.link {
  display: block;
  position: absolute;
  bottom: 20%;
  padding: 0 25px;
  height: 42px;
  line-height: 42px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  background: rgba(255, 0, 0, 1);
  color: white;
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

.link:before {
  border-radius: inherit;
  content: '';    
  display: block;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: -100;
  background: radial-gradient(98px 98px at center center, red 0%, #0088b5 100%);
}

.link:hover {
  text-decoration: none;
  background: rgba(255, 0, 0, 0);
}

<a class="link" href="#">Hover Me!</a>

如何在背景上设置过渡（从颜色到径向渐变）

2 个答案: