- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我只是在做一个初学者元素,当我将鼠标悬停在 Instagram 图标上时,我希望它能慢慢过渡到我从 StackOverflow 复制的一些 svg 代码的颜色渐变。我了解 SVG 代码的工作原理(通常),但无法弄清楚如何使转换工作。
这是一段必要的代码,以及我目前已经尝试过的 CSS。
我相信 fill
的结束转换值是导致问题的原因。如果我将它更改为不同的值,例如 "blue"
或 "red"
,转换工作正常。
.social-container {
position: absolute;
bottom: 0;
color: white;
border: 1px solid white;
display: flex;
width: 150px;
height: 35px;
justify-content: space-between;
align-items: center;
}
svg {
transition: fill 3s ease;
}
.instagram-logo svg * {
transition: all 2s ease;
fill: black;
}
.instagram-logo:hover svg * {
fill: url(#rg);
}
/* So I noticed the issue is the .instagram-logo:hover svg * {}. When I use a solid color like "blue" for the fill value, the transition works flawlessly. But when using the url, it doesn't work at all */
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="instagram-logo">
<svg width="0" height="0">
<radialGradient id="rg" r="150%" cx="30%" cy="107%">
<stop stop-color="#fdf497" offset="0" />
<stop stop-color="#fdf497" offset="0.05" />
<stop stop-color="#fd5949" offset="0.45" />
<stop stop-color="#d6249f" offset="0.6" />
<stop stop-color="#285AEB" offset="0.9" />
</radialGradient>
</svg>
<i class="fab fa-instagram fa-2x"></i>
</div>
最佳答案
浏览器开始支持 <color>
的 CSS 转换值,因此它们确实接受在您的 CSS fill: <color>
之间进行转换给另一个fill: <color>
.
但是,当您设置此 CSS 时 fill
梯度值,对于引擎,现在是 <urlFunc>
值,最终解析为 <image>
值(value)*。所以从 <color>
过渡到这个新值是不可能的。
*虽然我不确定这个断言...
不过,一个解决方案是为 CSS 添加动画 <filter>
值:
.instagram-logo{
padding: 2px 8px;
}
.instagram-logo svg.fa-instagram path{
fill: url(#rg);
}
/* from black to color */
.instagram-logo svg.fa-instagram{
filter: brightness(0%) grayscale(100%);
transition: filter 2s ease, -webkit-filter 2s ease;
}
.instagram-logo svg.fa-instagram:hover{
filter: brightness(100%) grayscale(0%);
}
/* from white to color */
.instagram-logo.white{
background: black;
}
.instagram-logo.white svg.fa-instagram{
filter: brightness(0%) grayscale(100%) invert(1);
}
.instagram-logo.white svg.fa-instagram:hover{
/*
we need to make a new declaration
because transitions can only be done on func values
so we need the same <filterFunc> at both hands of the transition
*/
filter: brightness(100%) grayscale(0%) invert(0);
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="instagram-logo">
<svg class="hidden" width="0" height="0" style="position:absolute; z-index:-1">
<radialGradient id="rg" r="150%" cx="30%" cy="107%">
<stop stop-color="#fdf497" offset="0" />
<stop stop-color="#fdf497" offset="0.05" />
<stop stop-color="#fd5949" offset="0.45" />
<stop stop-color="#d6249f" offset="0.6" />
<stop stop-color="#285AEB" offset="0.9" />
</radialGradient>
</svg>
<i class="fab fa-instagram fa-2x"></i>
</div>
<div class="instagram-logo white">
<i class="fab fa-instagram fa-2x"></i>
</div>
请注意,在给定的示例中,我在父级 <svg>
上设置了过滤器节点,因为 chrome 似乎不支持在没有前缀的内部 SVG 节点上进行 CSS 过滤。
关于html - 如何将这种 Font Awesome (v5.0) 颜色从白色转换为我的自定义颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49290475/
我一直在用awesome在 ubuntu 14.04 上一段时间。 rc.lua 中定义的默认布局是: layouts = { awful.layout.suit.floating,
Font Awesome 4.0是对 Font Awesome 从头开始的完全重写。主要的新功能之一是图标现在具有命名空间。除了命名空间之外,图标还使用基于一致性和可预测性的新命名约定。不幸的是,
我有一个带有Bootsrap 4(SASS)和Font Awesome 5的MVC项目。我正在尝试使旋转的图标可以与Ajax加载面板一起使用,但是它不起作用。 Test Spin
似乎 font-awesome 支持自定义图标,并附有详细说明如何创建和提交您自己的图标,但该信息在他们的网站上不再可用。这是否意味着不再支持此功能并且您只能请求由 font-awesome 团队完成
我正在寻找一种让应用程序使用自己的全屏模式但不调整自己的窗口大小的方法。 例如,我想在全屏模式下在网络浏览器上观看视频,以隐藏除视频之外的浏览器/网站的所有其他栏/内容,但我想保留我的显示布局以同时查
如何设置行中显示的图标之间的间距?这是我的代码: 这些图标暂时太靠近了。 最佳答案 只需像其他任何操作一样设置边距即可。纯CSS。 关于font-awesome - Font A
当使用出色的 Font Awesome 时,如何使图标不透明 - 例如,如果我想使用 http://fortawesome.github.io/Font-Awesome/icon/chevron-ci
我正在尝试在 http://fortawesome.github.io/Font-Awesome/examples/ 更改 fontawesome 星级评分中前两颗星的颜色 我已经为第一个和第二个跨度
你好, 我正在努力将 Font Awesome 添加到我的网站。 在 Font Awesome github 页面上,它简单地说: “安装 FontAwesome.otf 并访问复制和粘贴页面。快乐设
我们正在使用和添加/删除某些 js 事件的 fa-spin。在 3x 下很容易看到的问题是齿轮不围绕固定轴旋转。我怀疑这是因为图标本身 (SVG) 被 Chrome 报告为 42 x 49 像素,即使
你好, 尝试使用 Lighthouse 解决 Font Awesome 图标/元素的可识别名称的审计点我不知道如何回答这个挑战:如何使 Font Awesome 元素具有可识别的名称? actual
我正在尝试自定义我的 Ubuntu 在我的两台电脑上使用 i3-wm , 多边形和 zsh (带有 oh-my-zsh 在其上) 我在我的一台计算机上遇到了一些问题,我在另一台上没有,尽管以相同的方式
如何配置真棒,所以它会启动新的应用程序,两个窗口对齐,如下所示: ---------------- |xxxxxxxxxx####| |xxxxxxxxxx####| |xxxxxxxxxx####|
我已阅读 Setting windows layout for a specific application in awesome-wm .现在我想在自动启动期间在特定标签下执行此操作。 例如: I
减小 Font Awesome 图标大小的最佳方法是什么。有一个 fa-3x 等等……来增加尺寸。有没有减少尺寸的类(class)? 最佳答案 Font-Awesome 图标,顾名思义,是基于字体的。
我会使用 Font Awesome 中的几个图标。 我发现我们可以下载整个 font-awesome 目录并使用简单的代码,如 并使用fa-camera-retro显示图标。 我可以只下载我将使用的字
在 font Awesome 4 中,您可以使用 CSS 轻松地将图标应用到 :before/:after 元素。 新的 font Awesome 5 JS/SVG 实现是否可以实现同样的效果?据我所
我刚开始在 Awesome 中为 rc.lua 做自定义 lua,我在想出如何根据鼠标位置启动某些东西时遇到了一些麻烦。到目前为止,这就是我所拥有的,但它没有做任何事情。 -- Open todo w
我正在运行我的 NodeJS 服务器并在 localhost:3000 上测试它。一切正常,但字体超棒的图标显示时好像字体文件丢失了。它在 Firefox 和 Chrome 中做同样的事情。 (我什至
我使用了 codeigniter 和 Font Awesome 5 我已经下载了 font awesome 5 的最新版本,但由于某种原因我的图标没有显示出来 Question How to get
我是一名优秀的程序员,十分优秀!