Question

我有一张彩色图片。我在初始加载时应用了灰度滤镜。在悬停时我删除了灰度滤镜。但是id也喜欢在悬停时旋转色调过滤器的颜色。但我有点困惑，为什么它不起作用。

感谢您的帮助！

HTML

<div id="duplicater0" class="flavNameDescBox addnewflavorimg col-4"> 
<img src="http://lorempixel.com/400/200/sports/1/"/>
</div>

CSS

  .addnewflavorimg img{
    margin-left:-21px;
    margin-top:-20px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    }

  .addnewflavorimg img:hover{
    -webkit-filter: none;
    filter: none;
    -webkit-animation: hue 3s infinite;
    animation: hue 3s infinite;
    }

Answer 1

喜欢这个？使用@keyframes，您可以hue-rotate从0deg到360deg

https://jsfiddle.net/1Ljys5gj/

@keyframes hue {
  0% {
   -webkit-filter: hue-rotate(0deg);
  }
  100% {
   -webkit-filter: hue-rotate(360deg);
  }
}

Answer 2

＆＃13;

.addnewflavorimg img{
    margin-left:-21px;
    margin-top:-20px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    }

  .addnewflavorimg img:hover{
    -webkit-filter: none;
    filter: none;
    -webkit-animation: hue 3s infinite;
    animation: hue 3s infinite;
    }

   @keyframes hue{
       0%{
           transform: rotate(0deg);
       }
       100%{
           transform: rotate(360deg);
       }
   }

＆＃13;

<div id="duplicater0" class="flavNameDescBox addnewflavorimg col-4"> 
    <img src="http://lorempixel.com/400/200/sports/1/"/>
</div>

＆＃13;

在悬停时旋转色调并移除灰度滤镜

2 个答案: