使用具有渐变背景的CSS3过渡

15 回答

• 2

  渐变不支持过渡（尽管当前的规范说它们应该像渐变一样支持通过插值来进行渐变过渡） .

  如果想要使用背景渐变的淡入效果，则必须在容器元素上设置 opacity 并“转换”不透明度 .

  （已经有一些浏览器版本支持渐变过渡（例如IE10 . 我在IE中测试了2016年的渐变过渡，它们似乎在当时工作，但我的测试代码不再有效 . ）

  Update: October 2018 具有无前缀新语法的渐变过渡[例如径向渐变（...）]现在确认在Microsoft Edge 17.17134上工作（再次？） . 我不知道什么时候加了 . 仍未使用最新的Firefox和Chrome / Windows 10 .

  回复于 2024-05-02T00:57:11+08:00
• 28

  一种解决方法是转换背景位置以产生渐变正在发生变化的效果：http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

  具有背景位置的CSS3渐变过渡虽然您无法使用CSS过渡属性直接为渐变设置动画，但可以为background-position属性设置动画以实现简单的渐变动画：此代码很简单：

  #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>
  

  回复于 2024-05-02T00:57:11+08:00
• 1

  一个解决方案是使用 background-position to mimic the gradient transition. 这个解决方案几个月前在Twitter Bootstrap中使用 .

  Update

  http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614

  这是一个简单的例子：

  Link state

  .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 state

  .btn:hover {
     background-position: 0 0;
  }
  

  回复于 2024-05-02T00:57:11+08:00
• 1

  我知道这是一个古老的问题，但是mabye有人在纯CSS中享受我的解决方案 . 渐变从左向右淡化 .

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

  <div class="contener" style="">
    <div class="ed"></div>
  </div>
  

  回复于 2024-05-02T00:57:11+08:00
• 0

  在下文中，锚标签具有子孙 . 孙子具有远背景梯度 . 近处背景中的孩子是透明的，但有渐变过渡到 . 在悬停时，孩子的不透明度在1秒的时间内从0过渡到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中进行了测试 . 这些是悬停之前，悬停中途和完全转换的悬停图像：

  

  

  

  回复于 2024-05-02T00:57:11+08:00
• 3

  FWIW，这是Sass mixin：

  Usage:

  @include gradientAnimation(red, blue, .6s);

  Mixin:

  @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的这篇精彩文章：https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759

  回复于 2024-05-02T00:57:11+08:00
• 1

  您可以使用几个堆叠渐变的不透明度中的过渡来消除渐变之间的过渡，如下面的一些答案中所述：

  CSS3 animation with gradients .

  您也可以转换位置，如下所述：

  CSS3 gradient transition with background-position .

  这里还有一些技巧：

  Animating CSS3 Gradients .

  回复于 2024-05-02T00:57:11+08:00
• 142

  渐变过渡的部分解决方法是使用插入框阴影 - 您可以转换框阴影本身或背景颜色 - 例如如果您创建与背景颜色相同的嵌入框阴影，而不是在背景颜色上使用过渡，则会产生幻觉，即普通背景正在变为径向渐变

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

  回复于 2024-05-02T00:57:11+08:00
• 1

  尝试使用：before和：after（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;}
  

  回复于 2024-05-02T00:57:11+08:00
• 2

  就像声明的那样 . CSS Transitions目前不支持渐变 . 但是你可以在某些情况下通过将其中一种颜色设置为透明来解决它，以便其他一些包装元素的背景颜色透过，然后转换它 .

  回复于 2024-05-02T00:57:11+08:00
• 0

  我在工作中使用它:) 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;
  }
  

  回复于 2024-05-02T00:57:11+08:00
• 0

  在codepen上发现了一个很好的hack，修改了 opacity 属性，但是通过利用伪元素实现了从一个渐变到另一个渐变的淡入淡出 . 他所做的是设置一个 :after ，这样当你改变实际元素的不透明度时， :after 元素会显示出来，看起来好像它是一个淡入淡出 . 认为分享是有用的 .

  原始代码：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>
  

  回复于 2024-05-02T00:57:11+08:00
• 3

  因为仍然没有正式的方法来发布另一个观点，所以不能伤害 . 写了一个轻量级的jQuery插件，您可以使用它来定义背景径向渐变和转换速度 . 这个基本用法然后让它淡入，使用requestAnimationFrame进行优化（非常流畅）：

  $('#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

  回复于 2024-05-02T00:57:11+08:00
• 8

  根据你问题中的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>
  

  根据你问题中的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;
  }
  

  它适合你吗？改变颜色根据您的需要:)

  回复于 2024-05-02T00:57:11+08:00
• 79

  我希望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 的背景颜色和瞧！

  https://codepen.io/keldon/pen/dzPxZP

  回复于 2024-05-02T00:57:11+08:00