Use CSS3 transitions with gradient backgrounds
我正在尝试使用css悬停在缩略图上进行转换，以便在悬停时，背景渐变淡入。转换不起作用，但如果我只是将其更改为
我知道这是可能的，就像在另一篇文章中有人做过的那样，但我无法弄清楚究竟是怎么回事。 任何帮助>这里有一些CSS可以使用：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #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))) } |
渐变不支持转换(尽管当前的规范表明它们应该支持像渐变一样通过插值来实现渐变过渡。)。
如果想要使用背景渐变的淡入效果，则必须在容器元素上设置不透明度并"转换"不透明度。
(已经有一些浏览器版本支持渐变过渡(例如IE10。我在IE中测试了2016年的渐变过渡，它们似乎在当时工作，但我的测试代码不再有效。)
更新：2018年10月
使用无前缀新语法的渐变过渡[例如径向渐变(...)]现已确认在Microsoft Edge 17.17134上工作(再次？)。我不知道什么时候加了。仍未使用最新的Firefox和Chrome / Windows 10。
一种解决方法是转换背景位置以产生渐变正在改变的效果：
http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
CSS3 gradient transition with background-position
Although you can’t directly animate gradients using the CSS transition property, it is possible to animate the background-position property to achieve a simple gradient animation:
The code for this is dead simple:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | #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; } |
1 |
解决方案是使用背景位置来模拟梯度过渡。
几个月前，这个解决方案在Twitter Bootstrap中使用。
更新
http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614
这是一个简单的例子：
链接状态
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .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; } |
悬停状态
1 2 3 | .btn:hover { background-position: 0 0; } |
我知道这是一个老问题但是mabye有人在纯CSS中享受我的解决方案。渐变从左向右淡出。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | .contener{ background-image:url('http://www.imgbase.info/images/safe-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));} } |
1 |
对于它的价值，这里是Sass mixin：
用法：
混入：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | @mixin gradientAnimation( $start, $end, $transTime ){ background-size: 100%; background-image: linear-gradient($start, $end); position: relative; z-index: 100; &:before { background-image: linear-gradient($end, $start); content:""; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -100; transition: opacity $transTime; } &:hover { &:before { opacity: 1; } } } |
摘自Dave Lunny关于Medium的这篇精彩文章：https：//medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
在下文中，锚标签具有子孙。孙子具有远背景梯度。近处背景中的孩子是透明的，但有渐变过渡到。在悬停时，孩子的不透明度在1秒的时间内从0过渡到1。
这是CSS：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | .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：
1 | Transgradient |
以上内容仅在最新版本的Chrome中进行了测试。这些是悬停之前，中途停留和完全转换的悬停图像：
在codepen上找到了一个很好的hack来修改
原始代码：http：//codepen.io/sashtown/pen/DfdHh
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | .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; } |
1 | <span>BUTTON</span> |
渐变过渡的部分解决方法是使用插入框阴影 - 您可以转换框阴影本身或背景颜色 - 例如如果您创建与背景颜色相同的嵌入框阴影，而不是在背景颜色上使用过渡，则会产生幻觉，即普通背景正在变为径向渐变
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .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; } |
您可以使用几个堆叠渐变的不透明度中的过渡来消除渐变之间的过渡，如下面的一些答案中所述：
带渐变的CSS3动画。
您也可以转换位置，如下所述：
具有背景位置的CSS3渐变过渡。
这里还有一些技巧：
动画CSS3渐变。
根据你问题中的css代码，我尝试了如下代码，它适用于我(运行代码片段)，请自己尝试：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | #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; } |
1 | <span>Press Me</span> |
根据你问题中的css代码，我尝试了如下代码，它适用于我，请自己尝试：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | #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; } |
它适合你吗？
根据您的需要改变颜色:)
我在工作中使用它:) IE6 +
https://gist.github.com/GrzegorzPerko/7183390
如果使用文本元素，请不要忘记
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .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; } |
尝试使用：before和：after(ie9 +)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | #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;} |
就像声明的那样。 CSS Transitions目前不支持渐变。但是你可以在某些情况下通过将其中一种颜色设置为透明来解决它，以便其他一些包装元素的背景颜色透过，然后转换它。
我希望div看起来像3D球体并通过颜色过渡。
我发现渐变背景颜色不会转换(尚未)。
我在元素前面放置了一个径向渐变背景(使用z-index)，并具有过渡的实体背景。
1 2 3 | /* overlay */ z-index : 1; background : radial-gradient( ellipse at 25% 25%, rgba( 255, 255, 255, 0 ) 0%, rgba( 0, 0, 0, 1 ) 100% ); |
然后
1 | transition : all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); |
然后改变了
https://codepen.io/keldon/pen/dzPxZP
因为仍然没有正式的方法来发布另一个观点，所以不能伤害。写了一个轻量级的jQuery插件，您可以使用它来定义背景径向渐变和转换速度。这个基本用法然后让它淡入，用requestAnimationFrame进行优化(非常流畅)：
1 2 3 4 5 6 | $('#element').gradientFade({ duration: 2000, from: '(20,20,20,1)', to: '(120,120,120,0)' }); |
http://codepen.io/Shikkediel/pen/xbRaZz?editors=001
保持原始背景和所有属性完好无损。还有突出显示跟踪作为设置：
http://codepen.io/Shikkediel/pen/VYRZZY?editors=001