css3（過渡）不起作用

我試圖改變背景和文本顏色與css3過渡效果時懸停在一個按鈕，但只有文本顏色正在改變，而不是背景顏色。這是我的jsfiddle code這裏是我的CSS：css3（過渡）不起作用

.input-submit 
{ 
    margin: 12px 0 2px 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(224, 224, 224))); 
    background-image: -webkit-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224)); 
    background-image: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224)); 
    background-image: -o-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224)); 
    background-image: linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224)); 
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5); 
    -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5); 
    box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5); 
    border: 0; 
    font-weight: normal; 
    color: #333; 
    text-shadow: 0 1px 0 white; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    padding: 5px; 
    width: 60px; 
    border-image: initial; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 

} 

.input-submit:hover 
{ 
    cursor:pointer; 
    margin: 12px 0 2px; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(145, 191, 1)), to(rgb(111, 149, 1))); 
    background-image: -webkit-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1)); 
    background-image: -moz-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1)); 
    background-image: -o-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1)); 
    background-image: linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1)); 
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5); 
    -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5); 
    box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5); 
    border: 0; 
    font-weight: normal; 
    color: #fff; 
    text-shadow: 0 1px 0 white; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    padding: 5px; 
    width: 60px; 
    border-image: initial; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 

}

來源

2012-01-24 Suresh Pattu

適合我...編輯：哦，我明白了。這不是過渡... – mowwwalker

亞歷克斯似乎是正確的，請參閱用戶給這個問題的答案：http://stackoverflow.com/questions/3790273/webkit-support-for-gradient-transitions – mowwwalker

這是CSS的相當塊你到了那裏！據我所知，沒有瀏覽器允許css漸變轉換。由於你的背景不是純色，你不能轉換它們。

來源

2012-01-24 05:37:24

css3（過渡）不起作用

回答

相關問題