0

是否可以从没有背景的 div 过渡到具有渐变背景的 div？

div { background-color:none;}

div:hover {
background:#D74413; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D74413), to(#8A2D0D)); 
background: -webkit-linear-gradient(top, #D74413, #8A2D0D); background: -moz-linear-gradient(top, #D74413, #8A2D0D); 
background: -ms-linear-gradient(top, #D74413, #8A2D0D); background: -o-linear-gradient(top, #D74413, #8A2D0D);
}
4

2 回答 2

2

动画渐变并不简单，它涉及到渐变的背景大小和位置。例如此处显示：

http://www.impressivewebs.com/animating-css3-gradients/

一个对我有用的简单解决方法是将渐变放在 div 的一个孩子上，并像这里一样为其不透明度设置动画：

http://jsfiddle.net/willemvb/rWpZN/

HTML：

<div id="container">
  <div id="back"></div>
</div>​

CSS（适用于 webkit，但如果您添加变体，也适用于其他现代浏览器）

#container { 
  position: relative;
  width: 500px; height: 500px;
  background: transparent;
}    

#back { 
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  opacity: 0;
  background: -webkit-linear-gradient(top, #ccc, #999);     
  z-index: -1;
  -webkit-transition: opacity 3s ease-out;
}    


#container:hover #back {
  opacity: 1;
}​
于 2012-10-08T13:44:10.047 回答
1

使用本网站：

终极 CSS 渐变生成器

于 2012-10-08T13:22:45.847 回答