css - 图标的 SVG 线交叉动画
问题描述
我有两个图标,一个处于原始状态,一个处于划线状态。我想为交叉线设置动画,但更改dash-offset
没有用,因为它们是两个不同的 svg。
我正在看这些动画图标,但仍然无法弄清楚神奇的部分。我想问一下:
- 过渡工作流程应该是什么?
- 我更喜欢使用纯CSS,可以吗?
一个工作示例将不胜感激。
解决方案
该页面上的动画图标非常复杂(更多的是它们需要是 IMO)。但基本上他们所做的是从右向左滑动一个矩形遮罩,覆盖第一个图标,并露出第二个图标。
这是一个使用纯 CSS 的简化版本,希望它更清晰。
svg {
width: 100px;
height: 100px;
}
/* slides the two masks to the left on hover */
svg:hover #bottom-rect,
svg:hover #top-rect
{
transition: transform 500ms;
transform: translate(-24px, 0px);
}
/* slides the two masks back to the right when not hovered */
svg #bottom-rect,
svg #top-rect {
transition: transform 500ms;
transform: translate(0px, 0px);
}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<defs>
<mask id="bottom">
<rect id="bottom-rect" width="24" height="24" fill="white" stroke="none"/>
</mask>
<mask id="top">
<rect id="top-rect" x="24" width="24" height="24" fill="white" stroke="none"/>
</mask>
</defs>
<g mask="url(#bottom)">
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
<line x1="12" y1="19" x2="12" y2="23"></line>
<line x1="8" y1="23" x2="16" y2="23"></line>
</g>
<g mask="url(#top)">
<line x1="1" y1="1" x2="23" y2="23"></line>
<path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"></path>
<path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path>
<line x1="12" y1="19" x2="12" y2="23"></line>
<line x1="8" y1="23" x2="16" y2="23"></line>
</g>
</svg>
推荐阅读
- r - 如何通过在 Windows 中双击打开 RStudio 中的 r 脚本(.R 文件)
- reactjs - Redux 无限循环
- python - 如果发现 NoneType / 缺失值,如何对 Python 的 DataFrame 进行 API 数据输入处理
- assembly - Game Boy:半进位标志和 16 位指令(尤其是操作码 0xE8)
- ios - 单击单元格时如何用另一个数组更新 UICollectionView?
- vuejs2 - 如何将键作为变量传递给 Bootstrap-Vue 表中的模板
- php - 如何从 PHP 或 smarty 中的单个变量输出创建多个变量?
- python - 有没有更快的读取、写入和保存 Excel 文件的方法?
- cassandra - 可以在不影响应用程序的情况下关闭一半的 Cassandra 节点吗?
- barcode - 将小条码转换成更长条码