使用渐变背景的CSS3转换
我试图转换hover与CSS缩略图，以便hover时，背景渐变淡入。转换不工作，但如果我只是将其更改为rgba（）值，它工作正常。 渐变不被支持？ 我也尝试使用一个图像，它也不会过渡的形象。
我知道这是可能的，因为在另一个post有人做了，但我无法弄清楚究竟如何。 任何帮助>这里有一些CSS可以使用：
#container div a { -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear; position:absolute; width:200px; height:150px;border: 1px #000 solid; margin:30px;z-index:2 } #container div a:hover { background:-webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0,0,0,.7)), to(rgba(0,0,0,.4))) } 渐变不支持转换（尽pipe目前的规范说他们应该像渐变一样支持通过插值来渐变转换）。
如果你想要一个背景渐变的淡入效果，你必须设置一个容器元素的不透明度和“过渡”的不透明度。
（已经有一些支持渐变的浏览器版本（例如IE10），去年我testing了渐变过渡效果，他们似乎在工作，但是我的testing代码不再适用 – 可能是Matrix有一个小故障。
一个解决方法是转换背景的位置，以达到渐变效果： http : //sapphion.com/2011/10/css3-gradient-transition-with-background-position/
具有背景位置的CSS3渐变过渡
虽然不能使用CSS transition属性直接设置渐变效果，但可以通过为background-position属性设置animation来实现简单的渐变animation：
这个代码很简单：
#DemoGradient{ background: -webkit-linear-gradient(#C7D3DC,#5B798E); background: -moz-linear-gradient(#C7D3DC,#5B798E); background: -o-linear-gradient(#C7D3DC,#5B798E); background: linear-gradient(#C7D3DC,#5B798E); -webkit-transition: background 1s ease-out; -moz-transition: background 1s ease-out; -o-transition: background 1s ease-out; transition: background 1s ease-out; background-size:1px 200px; border-radius: 10px; border: 1px solid #839DB0; cursor:pointer; width: 150px; height: 100px; } #DemoGradient:Hover{ background-position:100px; }
<div id="DemoGradient"></div>
一个解决scheme是使用背景位置来模仿渐变过渡。 几个月前，这个解决scheme被用于Twitter Bootstrap。
更新
http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614
这里是一个简单的例子：
链接状态
.btn { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-weight: 300; position: relative; display: inline-block; text-decoration: none; color: #fff; padding: 20px 40px; background-image: -moz-linear-gradient(top, #50abdf, #1f78aa); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#50abdf), to(#1f78aa)); background-image: -webkit-linear-gradient(top, #50abdf, #1f78aa); background-image: -o-linear-gradient(top, #50abdf, #1f78aa); background-image: linear-gradient(to bottom, #50abdf, #1f78aa); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff50abdf', endColorstr='#ff1f78aa', GradientType=0); background-repeat: repeat-y; background-size: 100% 90px; background-position: 0 -30px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
hover状态
.btn:hover { background-position: 0 0; }
我知道这是一个老问题，但是有人喜欢我的纯粹CSS解决scheme。 渐变从左到右渐变。
.contener{ background-image:url('http://www.imgbase.infohttp://img.dovov.comsafe-wallpapers/digital_art/3d_landscape/9655_3d_landscape.jpg'); width:300px; height:200px; background-size:cover; border:solid 2px black; } .ed { width: 0px; height: 200px; background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.75)); position: relative; opacity:0; transition:width 20s, opacity 0.6s; } .contener:hover .ed{ width: 300px; background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.75)); position: relative; opacity:1; transition:width 0.4s, opacity 1.1s; transition-delay: width 2s; animation-name: gradient-fade; animation-duration: 1.1s; -webkit-animation-name: gradient-fade; /* Chrome, Safari, Opera */ -webkit-animation-duration: 1.1s; /* Chrome, Safari, Opera */ } /* ANIMACJA */ @-webkit-keyframes gradient-fade { 0% {background:linear-gradient(to right, rgba(0,0,255,0), rgba(255,0,0,0));} 2% {background:linear-gradient(to right, rgba(0,0,255,0.01875), rgba(255,0,0,0));} 4% {background:linear-gradient(to right, rgba(0,0,255,0.0375), rgba(255,0,0,0.0));} 6% {background:linear-gradient(to right, rgba(0,0,255,0.05625), rgba(255,0,0,0.0));} 8% {background:linear-gradient(to right, rgba(0,0,255,0.075), rgba(255,0,0,0));} 10% {background:linear-gradient(to right, rgba(0,0,255,0.09375), rgba(255,0,0,0));} 12% {background:linear-gradient(to right, rgba(0,0,255,0.1125), rgba(255,0,0,0));} 14% {background:linear-gradient(to right, rgba(0,0,255,0.13125), rgba(255,0,0,0));} 16% {background:linear-gradient(to right, rgba(0,0,255,0.15), rgba(255,0,0,0));} 18% {background:linear-gradient(to right, rgba(0,0,255,0.16875), rgba(255,0,0,0));} 20% {background:linear-gradient(to right, rgba(0,0,255,0.1875), rgba(255,0,0,0));} 22% {background:linear-gradient(to right, rgba(0,0,255,0.20625), rgba(255,0,0,0.01875));} 24% {background:linear-gradient(to right, rgba(0,0,255,0.225), rgba(255,0,0,0.0375));} 26% {background:linear-gradient(to right, rgba(0,0,255,0.24375), rgba(255,0,0,0.05625));} 28% {background:linear-gradient(to right, rgba(0,0,255,0.2625), rgba(255,0,0,0.075));} 30% {background:linear-gradient(to right, rgba(0,0,255,0.28125), rgba(255,0,0,0.09375));} 32% {background:linear-gradient(to right, rgba(0,0,255,0.3), rgba(255,0,0,0.1125));} 34% {background:linear-gradient(to right, rgba(0,0,255,0.31875), rgba(255,0,0,0.13125));} 36% {background:linear-gradient(to right, rgba(0,0,255,0.3375), rgba(255,0,0,0.15));} 38% {background:linear-gradient(to right, rgba(0,0,255,0.35625), rgba(255,0,0,0.16875));} 40% {background:linear-gradient(to right, rgba(0,0,255,0.375), rgba(255,0,0,0.1875));} 42% {background:linear-gradient(to right, rgba(0,0,255,0.39375), rgba(255,0,0,0.20625));} 44% {background:linear-gradient(to right, rgba(0,0,255,0.4125), rgba(255,0,0,0.225));} 46% {background:linear-gradient(to right, rgba(0,0,255,0.43125),rgba(255,0,0,0.24375));} 48% {background:linear-gradient(to right, rgba(0,0,255,0.45), rgba(255,0,0,0.2625));} 50% {background:linear-gradient(to right, rgba(0,0,255,0.46875), rgba(255,0,0,0.28125));} 52% {background:linear-gradient(to right, rgba(0,0,255,0.4875), rgba(255,0,0,0.3));} 54% {background:linear-gradient(to right, rgba(0,0,255,0.50625), rgba(255,0,0,0.31875));} 56% {background:linear-gradient(to right, rgba(0,0,255,0.525), rgba(255,0,0,0.3375));} 58% {background:linear-gradient(to right, rgba(0,0,255,0.54375), rgba(255,0,0,0.35625));} 60% {background:linear-gradient(to right, rgba(0,0,255,0.5625), rgba(255,0,0,0.375));} 62% {background:linear-gradient(to right, rgba(0,0,255,0.58125), rgba(255,0,0,0.39375));} 64% {background:linear-gradient(to right,rgba(0,0,255,0.6), rgba(255,0,0,0.4125));} 66% {background:linear-gradient(to right, rgba(0,0,255,0.61875), rgba(255,0,0,0.43125));} 68% {background:linear-gradient(to right, rgba(0,0,255,0.6375), rgba(255,0,0,0.45));} 70% {background:linear-gradient(to right, rgba(0,0,255,0.65625), rgba(255,0,0,0.46875));} 72% {background:linear-gradient(to right, rgba(0,0,255,0.675), rgba(255,0,0,0.4875));} 74% {background:linear-gradient(to right, rgba(0,0,255,0.69375), rgba(255,0,0,0.50625));} 76% {background:linear-gradient(to right, rgba(0,0,255,0.7125), rgba(255,0,0,0.525));} 78% {background:linear-gradient(to right, rgba(0,0,255,0.73125),,rgba(255,0,0,0.54375));} 80% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.5625));} 82% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.58125));} 84% {background:linear-gradient(to right, rgba(0,0,255,0.75),rgba(255,0,0,0.6));} 86% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.61875));} 88% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.6375));} 90% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.65625));} 92% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.675));} 94% {background:linear-gradient(to right, rgba(0,0,255,0.75),rgba(255,0,0,0.69375));} 96% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.7125));} 98% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.73125),);} 100% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.75));} }
<div class="contener" style=""> <div class="ed"></div> </div>
在下面，一个锚标签有一个孩子和一个孙子。 孙子有很远的背景渐变。 靠近背景的孩子是透明的，但有梯度过渡到。 hover时，孩子的不透明度从1秒过渡到1秒。
这是CSS：
.bkgrndfar { position:absolute; top:0; left:0; z-index:-2; height:100%; width:100%; background:linear-gradient(#eee, #aaa); } .bkgrndnear { position:absolute; top:0; left:0; height:100%; width:100%; background:radial-gradient(at 50% 50%, blue 1%, aqua 100%); opacity:0; transition: opacity 1s; } a.menulnk { position:relative; text-decoration:none; color:#333; padding: 0 20px; text-align:center; line-height:27px; float:left; } a.menulnk:hover { color:#eee; text-decoration:underline; } /* This transitions child opacity on parent hover */ a.menulnk:hover .bkgrndnear { opacity:1; }
而且，这是HTML：
<a href="#" class="menulnk">Transgradient <div class="bkgrndfar"> <div class="bkgrndnear"> </div> </div> </a>
以上只是在最新版本的Chrome中进行testing。 这是前hover，中途hover和完全过渡hover的图像：
您可以使用几个堆积渐变的不透明度中的渐变，在渐变之间进行渐变，如下面几个答案中所述：
具有渐变的CSS3animation 。
您也可以转换位置，如下所述：
具有背景位置的CSS3渐变过渡 。
这里有更多的技巧：
animationCSS3渐变 。
尝试使用：之前和之后（ie9 +）
#wrapper{ width:400px; height:400px; margin:0 auto; border: 1px #000 solid; position:relative;} #wrapper:after, #wrapper:before{ position:absolute; top:0; left:0; width:100%; height:100%; content:''; background: #1e5799; background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); opacity:1; z-index:-1; -webkit-transition: all 2s ease-out; -moz-transition: all 2s ease-out; -ms-transition: all 2s ease-out; -o-transition: all 2s ease-out; transition: all 2s ease-out; } #wrapper:after{ opacity:0; background: #87e0fd; background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); } #wrapper:hover:before{opacity:0;} #wrapper:hover:after{opacity:1;}
渐变过渡的部分解决方法是使用内嵌框阴影 – 您可以转换框阴影本身或背景色 – 例如，如果创build与背景相同颜色的embedded框阴影，并使用背景颜色的过渡，则会产生错觉简单的背景正在改变为径向渐变
.button SPAN { padding: 10px 30px; border: 1px solid ##009CC5; -moz-box-shadow: inset 0 0 20px 1px #00a7d1; -webkit-box-shadow: inset 0 0 20px 1px#00a7d1; box-shadow: inset 0 0 20px 1px #00a7d1; background-color: #00a7d1; -webkit-transition: background-color 0.5s linear; -moz-transition: background-color 0.5s linear; -o-transition: background-color 0.5s linear; transition: background-color 0.5s linear; } .button SPAN:hover { background-color: #00c5f7; }
我在工作中使用这个:) IE6 + https://gist.github.com/GrzegorzPerko/7183390
如果您使用文本元素，请不要忘记<element class="ahover"><span>Text</span></a> 。
.ahover { display: block; /** text-indent: -999em; ** if u use only only img **/ position: relative; } .ahover:after { content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transition: all 0.5s ease 0s; width: 100%; z-index: 1; } .ahover:hover:after { opacity: 1; } .ahover span { display: block; position: relative; z-index: 2; }
在codepen上find一个修改opacity属性的好手法，但是通过利用伪元素实现了从一个渐变到另一个渐变的渐变。 他所做的是他设置了:after ，当你改变实际元素的不透明度时， :after元素显示出来，看起来好像是淡入淡出。 认为这将是有益的分享。
原来的codepen： http ://codepen.io/sashtown/pen/DfdHh
.button { display: inline-block; margin-top: 10%; padding: 1em 2em; font-size: 2em; color: #fff; font-family: arial, sans-serif; text-decoration: none; border-radius: 0.3em; position: relative; background-color: #ccc; background-image: linear-gradient(to top, #6d8aa0, #8ba2b4); -webkit-backface-visibility: hidden; z-index: 1; } .button:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.3em; background-image: linear-gradient(to top, #ca5f5e, #d68584); transition: opacity 0.5s ease-out; z-index: 2; opacity: 0; } .button:hover:after { opacity: 1; } .button span { position: relative; z-index: 3; } body { text-align: center; background: #ddd; }
<a class="button" href="#"><span>BUTTON</span></a>
就像声明的那样。 CSS转换目前不支持渐变。 但是在某些情况下，你可以通过将其中一种颜色设置为透明来解决这个问题，这样一些其他的包装元素的背景颜色就可以透过，然后转换。
不能伤害张贴另一种看法，因为仍然没有官方的方式来做到这一点。 写了一个轻量级的jQuery插件，您可以使用它定义背景径向渐变和转换速度。 这个基本的用法将会让它淡入，用requestAnimationFrame进行优化（非常stream畅）：
$('#element').gradientFade({ duration: 2000, from: '(20,20,20,1)', to: '(120,120,120,0)' });
http://codepen.io/Shikkediel/pen/xbRaZz?editors=001
保持原始背景和所有属性完好无损。 还有突出显示跟踪作为设置：
我想要一个div看起来像一个3D球体，并通过颜色过渡。 我发现渐变背景颜色不会过渡（还）。 我在（z-index）前面放置了一个径向渐变背景，这个背景有一个过渡的纯色背景。
/* overlay */ z-index : 1; background : radial-gradient( ellipse at 25% 25%, rgba( 255, 255, 255, 0 ) 0%, rgba( 0, 0, 0, 1 ) 100% );
那么下面的div.ball ：
transition : all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
然后改变了div.ball et瞧的背景颜色！
基于您的问题的CSS代码，我已经尝试代码如下，它适用于我（运行代码片段），请自己尝试：
#container div a { display: inline-block; margin-top: 10%; padding: 1em 2em; font-size: 2em; color: #fff; font-family: arial, sans-serif; text-decoration: none; border-radius: 0.3em; position: relative; background-color: #ccc; background-image: linear-gradient(to top, #C0357E, #EE5840); -webkit-backface-visibility: hidden; z-index: 1; } #container div a:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.3em; background-image: linear-gradient(to top, #6d8aa0, #343436); transition: opacity 0.5s ease-out; z-index: 2; opacity: 0; } #container div a:hover:after { opacity: 1; } #container div a span { position: relative; z-index: 3; }
<div id="container"><div><a href="#"><span>Press Me</span></a></div></div>
