Question

我正在使用带有渐变颜色的背景提交按钮。我想在悬停时为该颜色设置动画，尽管渐变颜色不是可设置动画的属性。我发现了一个很好的CSS技巧，可以使用:: before元素在锚标记上进行此操作，但似乎不适用于“提交”按钮。下面是用于锚定动画的示例代码。将锚替换为提交后，为什么相同的代码不起作用？我认为问题与提交按钮上:: before元素的高度和宽度有关，但无法理解为什么它没有占用按钮的大小。有想法吗？

a {
  background: linear-gradient(to bottom, #3ccf2c 40%, #185400 100%);
  color: white;
  display: inline-block;
  padding: 5px;
  position: relative;
  z-index: 5;
}

a::before {
  background: linear-gradient(to bottom, #2d9b21 40%, #123f00 100%);
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  transition: opacity 0.4s;
  top: 0;
  opacity: 0;
  width: 100%;
  z-index: -5;
}

a:hover::before {
  opacity: 1;
}

<body>
  <a>submit</a>
</body>

Answer 1

您可以在悬停时为渐变背景设置动画。我为您创建了一个小提琴，因此您可以看到：https://codepen.io/mrmathewc/pen/oNNzeJr。

<a id="DemoGradient">Button</a>

#DemoGradient{
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);
    background: -moz-linear-gradient(#C7D3DC,#5B798E);
    background: -o-linear-gradient(#C7D3DC,#5B798E);
    background: linear-gradient(#C7D3DC,#5B798E);

    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;

    background-size:1px 200px;
    border-radius: 10px;
    border: 1px solid #839DB0;
    cursor:pointer;
    width: 150px;
    height: 100px;

    padding: 10px;
    margin: 10px;
}
#DemoGradient:Hover{
    background-position:100px;
}

我希望这会有所帮助。

输入的CSS大小：：与输入大小相同

1 个答案: