时间戳

首页 > 解决方案 > 如何在背景上放置过渡（颜色到径向渐变）

css - 如何在背景上放置过渡（颜色到径向渐变）

问题描述

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

悬停背景设置为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%);
}

标签： css

解决方案

您可以使用背景大小：

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

推荐阅读