当前位置: 首页 > 知识库问答 >
问题:

平滑的CSS过滤器过渡?

公孙胡媚
2023-03-14

我的CSS:

.icon {
  -webkit-transition: -webkit-filter 0.2s linear;
  -ms-transition: -ms-filter 0.2s linear;
  transition: filter 0.2s linear;
  filter: invert(61%) sepia(2%) saturate(10%) hue-rotate(314deg) brightness(100%) contrast(84%);


.icon:hover {
  filter: invert(63%) sepia(75%) saturate(5149%) hue-rotate(165deg) brightness(101%) contrast(101%);
}

问题是当用户悬停在上时,颜色会变得疯狂,一个接一个地应用在滤镜上。 这是不是可以用一种更顺畅的方式来做呢?

共有1个答案

苏伟志
2023-03-14

试试这个。

null

    -webkit-transition : -webkit-filter 500ms linear
 类似资料:
  • 我需要在svg图像上使用滤镜来改变颜色,但它在IE上不起作用。 我看了一下,发现这是因为它不受支持,但我需要另一种方法来做到这一点。我需要更改颜色,填充不是一个选项。有没有办法让过滤器在IE上工作? 滤镜:亮度(0)饱和(100%)反转(100%)棕褐色(0%)饱和(25%)色调-旋转(70度)亮度(108%)对比度(108%);

  • 过滤器是 控制器动作 执行之前或之后执行的对象。 例如访问控制过滤器可在动作执行之前来控制特殊终端用户是否有权限执行动作, 内容压缩过滤器可在动作执行之后发给终端用户之前压缩响应内容。 过滤器可包含预过滤(过滤逻辑在动作之前)或后过滤(过滤逻辑在动作之后), 也可同时包含两者。 使用过滤器 过滤器本质上是一类特殊的 行为, 所以使用过滤器和 使用行为一样。 可以在控制器类中覆盖它的 behavio

  • 请你再一次回顾这张图: 一个 HTTP 请求,过滤器是第一组被执行的对象。同适配器不同的是,一个请求中,可以执行多个过滤器。 如何使用过滤器? 通过 @Filters 注解。 注解 '@Filters' 的值是一个 '@By' 注解的数组,它可以声明在这三个地方 入口函数 子模块 主模块 其中入口函数的 @Filters 优先级更高,其次是子模块,最后是主模块。 就是说,你在入口模块声明了两个过滤

  • 过滤器前缀 :, 比如 :markdown 会把下面块里的文本交给专门的函数进行处理。查看顶部 特性 里有哪些可用的过滤器。 body :markdown Woah! jade _and_ markdown, very **cool** we can even link to [stuff](http://google.com) 渲染为: <body><p>Woah! j

  • 过滤器本质上是可以应用于变量的函数。它们用管道操作符(|)调用,并且可以接受参数。 {{ foo | title }} {{ foo | join(",") }} {{ foo | replace("foo", "bar") | capitalize }} 定义一个新的过滤器 可以在过滤器的入口自定义函数来扩展过滤器。 过滤器函数将要过滤的内容作为第一个参数,并应返回新内容。 参考上下文API了

  • Filters are special post-processors that modify expanded abbreviation right before output to the editor. To better understand how filters work, let’s walk through a simple tutorial. 过滤器在输出发给编辑器之前修改缩写的

  • 问题内容: 是最新的CSS功能,现代浏览器(至少从2016年7月1日起)尚不可用。 Chrome 51 通过实验性Web平台标志提供支持。 Safari 9.1支持带前缀 Firefox 47不支持 处于这种无法使用的状态,我想知道是否存在任何其他方法来获得相同的结果。 也欢迎针对,,…的JS解决方法 可以通过跟踪的发展 问题答案: 从Chrome M76开始,背景音乐滤镜现已出厂,没有前缀,并且

  • 问题内容: “过滤后的查询和过滤器”与“根查询和过滤器”之间有什么区别吗?例如 情况1: 情况2: 我在http://elasticsearch-users.115913.n3.nabble.com/Filtered-query-vs-using- filter-outside-td3960119.html中 找到了此讨论,但所引用的URL是404,并且解释过于简洁我。 请示教或提供指出这些区别的