0

代码笔示例

当您将鼠标悬停在 Chrome 中的徽标上时，动画会起作用。

  .logo_animate:hover{
    -webkit-filter: drop-shadow(-1px 0px 1px #705C12) drop-shadow(-1px 0px .02px 
    #705C12) drop-shadow(2px 0px .02px #705C12) drop-shadow(-1px 0px 1px #5C0704) 
    drop-shadow(-.02px 0px 1px #5C0704) drop-shadow(-.04px 0px 1px #5C0704)drop- 
    shadow(-1px 0px .02px #5C0704) drop-shadow(-.02px 0px .02px #5C0704) drop- 
    shadow(-.04px 0px .02px #5C0704) drop-shadow(.02px 0px .05px #5C0704);
    filter: drop-shadow(-1px 0px 1px #705C12) drop-shadow(-5px 0px .02px #705C12) 
    drop-shadow(-.02px 0px .02px #705C12) drop-shadow(-1px 0px 1px #5C0704) drop- 
   shadow(-.02px 0px 1px #5C0704) drop-shadow(-.04px 0px 1px #5C0704)drop- 
   shadow(-1px 0px .02px #5C0704) drop-shadow(-.02px 0px .02px #5C0704) drop- 
   shadow(-.04px 0px .02px #5C0704) drop-shadow(.02px 0px .05px #5C0704);
    stroke: #fff59d;
   }

当您将鼠标悬停在 Firefox 中的徽标上时，它会在“mouseout”上启动动画（不使用 Javascript，但这就是效果）。

为什么 Firefox 在悬停在 SVG 上时不触发 CSS 更改？

先感谢您。

4

1 回答 1

0

对我来说，它在 Chrome 和 Firefox 中的工作方式与没有这一行的方式相同：

-webkit-animation-fill-mode: forwards;
于 2018-07-16T18:34:57.393 回答