css3目前还不完善，transition目前不支持渐变的背景属性（它被看作是图片了，图片是不能transition的，这个知道吧），so U can't transition gradients for now.但是呢，你可以做一个掩眼法，前端嘛，css给了你无限发挥的空间。css：body{margin: 0;padding: 0;}.gavin_design div{width: 200px;heig...
css3目前还不完善，transition目前不支持渐变的背景属性（它被看作是图片了，图片是不能transition的，这个知道吧），so U can't transition gradients for now.
但是呢，你可以做一个掩眼法，前端嘛，css给了你无限发挥的空间。
css：
<style>body{margin: 0;padding: 0;}.gavin_design div{width: 200px;height: 200px;margin: 20px auto;}.no{background: #ccc;-webkit-transition: all 2s linear;}.no:hover{background: #f60;}.line{position: relative;background: -webkit-linear-gradient(top,#f60,#47CC38);}.line_gavinfix{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: -webkit-linear-gradient(top,#47CC38,#f60);-webkit-transition: opacity 2s linear;}.line:hover .line_gavinfix{opacity: 1;}</style>html：
<div class="gavin_design"> <div class="no"></div> <div class="line"><span class="line_gavinfix"></span></div></div>预览一下，怎么样？是你需要的么^.^
2015-02-04
