Question

是否可以从没有背景的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);
}

Answer 1

动画渐变并不简单，需要使用渐变的背景大小和位置。这里显示的例如：

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;
}

Answer 2

使用此网站：

Ultimate CSS Gradient Generator

CSS从无背景颜色过渡到渐变

2 个答案: