Question

我正在尝试为我的按钮创建一个很好的过渡。我在红色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>

您有什么想法来解决这个问题吗？

感谢!!!

Answer 1

问题是background-image无法设置动画，而css渐变实际上是浏览器渲染的图像。您可以通过更改背景位置或使用不透明度

来模拟渐变上的动画

这里有一篇关于动画渐变的文章： http://www.impressivewebs.com/animating-css3-gradients/

有关可动画属性的列表，请选中http://www.w3.org/TR/css3-transitions/#animatable-properties

没有Css过渡可能

1 个答案: