<分区>
标签 css
<分区>
我正在使用一个带有渐变色背景的提交按钮。我想在悬停时为该颜色设置动画，尽管渐变颜色不是可设置动画的属性。我发现了一个很好的 CSS 技巧，可以使用::before 元素在 anchor 标记上进行此操作，但它似乎不适用于提交按钮。下面是使用 anchor 进行动画处理的示例代码。当 anchor 被提交替换时，为什么同样的代码不起作用？我认为这个问题与提交按钮上::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>最佳答案
您可以在悬停时为渐变背景制作动画。我为你创建了一个 fiddle ，所以你可以看到: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 大小::在与输入大小相同之前，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58439994/