我正在尝试为我的按钮创建一个漂亮的过渡。我在红色 div 上测试了使用的模式，它有效!但在我的按钮上它不会。
我认为这可能是因为嵌套元素，但没有经过测试的解决方案。
div.container {
max-width: 240px;
width: auto;
border: 1px solid #cd8102;
border-radius: 3px;
height: 36px;
background: linear-gradient(#fcbf00, #f39600); /* Standard syntax */
font-family: 'PT Sans',sans-serif;
color: black;
font-size: 16px;
text-decoration: none;
text-align: center;
/* For Safari 3.1 to 6.0 */
-webkit-transition: background 1s linear 0s; /* For Safari 3.1 to 6.0 */
transition: background 1s linear 0s;
}
div.container:hover{
background: linear-gradient(yellow, #f39600); /* Standard syntax */
width: 300px;
}
div.innerContainer{
width: 90%;
margin-left: auto;
margin-right: auto;
display: inline-block;
width: auto; /* default value */
}
div.box1 {
box-sizing: border-box;
width: 207;
max-width: 207px;
/*border: 1px solid red; */
float: left;
height: 36px;
text-align: center;
padding-right: 6px;
padding-left: 10px;
}
div.box2 {
box-sizing: border-box;
width: 20px;
height: 20px;
margin-top: 8px;
text-align: center;
float: left;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
#TextInTheMiddle {
text-align: center;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
height: 36px;
}<a href="http://www.google.de" type="submit">
<div class="container">
<div class="innerContainer">
<div class="box1"><span id='TextInTheMiddle'>Langer text macht uns allen freude</span></div>
<div class="box2"><span><img id="img" src="file:///Y|/Button/images/icons/next.png" height="20" width="20"></span></div>
<div style="clear:both;"></div>
</div>
</div>
</a> 你有什么解决问题的想法吗？
谢谢!!!
最佳答案
问题是 background-image 不能动画，css 渐变实际上是浏览器渲染的图像。您可以通过更改背景位置或使用不透明度来模拟渐变动画
这里有一篇关于动画渐变的文章: http://www.impressivewebs.com/animating-css3-gradients/
有关可动画属性的列表，请检查 http://www.w3.org/TR/css3-transitions/#animatable-properties
关于html - 无法进行 Css 转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26293374/