我试图在悬停时用css过渡缩略图,这样在悬停时,背景渐变就会淡入。转换没有工作,但如果我简单地将其更改为rgba()值,它就可以工作。不支持渐变吗?我也尝试使用图像,它也不会过渡图像。

我知道这是可能的,因为在另一篇文章中有人做到了,但我不知道具体是怎么做到的。这里有一些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)))
}

当前回答

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

CSS3渐变过渡与背景位置 虽然你不能直接使用CSS的transition属性来动画渐变,但是你可以使用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>

其他回答

基于你的问题中的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;
}

这对你有用吗? 根据您的需要更改颜色:)

在下面的例子中,一个锚标记有一个子标记和一个孙子标记。孙子有远背景梯度。近背景中的子元素是透明的,但是有渐变要过渡。在悬停时,子物体的不透明度在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中进行测试。这些是悬停前,悬停中途和完全过渡的悬停图像:

不管怎样,这里有一个Sass mixin:

用法:

@include gradientAnimation(红色,蓝色,.6s);

混合:

@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/ animing-css -gradients-using-only-css-d2fd7671e759

非常感谢

.element { 位置:相对; 宽度:200 px; 身高:150 px; 背景图像:线性梯度(45度,蓝色,水); z - index: 2; } {前.element:: 位置:绝对的; 内容:“”; 插图:0;/*与{top: 0相同;右:0;底部:0;左:0;}* / 背景-图像:线性梯度(底部,红色,橙色); z - index: 1; 透明度:0; 过渡:不透明度0.25s线性; } {前.element:徘徊:: 透明度:1; } 身体< > < div class = "元素" > < / div > 身体< / >

::之前,CSS伪元素可以很容易地做到这一点!

.element { 位置:相对; 宽度:200 px; 身高:150 px; 背景图像:线性梯度(45度,蓝色,水); z - index: 2; } {前.element:: 位置:绝对的; 内容:“”; 插图:0;/*与{top: 0相同;右:0;底部:0;左:0;}* / 背景-图像:线性梯度(底部,红色,橙色); z - index: 1; 透明度:0; 过渡:不透明度0.25s线性; } {前.element:徘徊:: 透明度:1; } 身体< > < div class = "元素" > < / div > 身体< / >

你所要做的就是使用::before不透明度为零的伪元素。

打开:悬停,切换::before的不透明度为1,如果你遵循几个简单的步骤,你应该可以让你的过渡工作。

使用background-image设置元素的背景渐变 在不透明度为0的伪元素之前使用::来设置下一个渐变 设置不透明度为1 inside:hover::before 确保你的::before有: 绝对位置 内容:“ 比默认元素更低的z-index 顶部,底部,左侧和右侧为零(或简单地插入:0) 过渡目标不透明度与您的偏好的时间间隔

就是这样!现在你应该可以用你喜欢的任何持续时间/延迟/计时函数来调整你的过渡!