Question

我有这些单独的css代码：

#social img:hover {
opacity:1; filter:alpha(opacity=100);
-webkit-filter: grayscale(100%) sepia(100%);
   -moz-filter: grayscale(100%) sepia(100%);
     -o-filter: grayscale(100%) sepia(100%);
    -ms-filter: grayscale(100%) sepia(100%);
        filter: grayscale(100%) sepia(100%); 
}

和这一个：

#social{color: #000; transition: color 1s ease;}

我想让第一个类似于第二个，所以它实际上从原始图像（#social）平滑过渡到棕褐色调。我如何（将它们）合并在一起？它甚至可以在没有js的CSS中吗？

示例：Example

Answer 1

反应非常晚，但可能对有需要的人有所帮助。棕褐色，色调旋转以及可能的其他滤镜效果不会转换，因此您可以通过添加灰度（0.1％）来修补它，它将为整个滤镜效果设置动画。

img.greyscale {
  filter: grey;
  -webkit-filter: grayscale(0.1%) sepia(100%) hue-rotate(210deg);
  -webkit-transition: all 0.6s ease;
  -webkit-backface-visibility: hidden;
}
img.greyscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

<img class="greyscale" src="https://mdebranding.files.wordpress.com/2015/01/marilyn-monroe-marilyn-monroe-35587386-500-505.jpg" />

Answer 2

我认为这就是我在CSS中所能做的。适用于铬。不幸的是，在safari和firefox中没有用 jsfiddle.net/tucado/vZ2qA/10/

#social img:hover {

  -webkit-filter: sepia(100%);
     -moz-filter: sepia(100%);
       -o-filter: sepia(100%);
      -ms-filter: sepia(100%);
          filter: sepia(100%);

  -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
           -o-filter: all 0.5s;    
          -ms-filter: all 0.5s;    
          transition: all 0.5s; 
}

Answer 3

只需像设置其他任何内容一样设置过渡属性：

<强> CSS：

#social {
    transition: filter 1s ease;
}

演示： http://jsfiddle.net/vZ2qA/6/

此代码显然不包含供应商前缀。

在css中过渡到棕褐色

3 个答案: