Css 图标的SVG线交叉动画

我有两个，一个在原始状态，一个在被划掉的状态。 我想设置交叉线的动画，但是更改

虚线偏移量

没有用，因为这是两个不同的SVG

我在看动画图标，但仍然无法理解其中的神奇部分。我想问：

• 过渡工作流程应该是什么
• 我更喜欢使用纯CSS，可能吗

请提供一个工作示例。

使用CSS的方法

您只需显示/隐藏悬停时所需的图标。要设置线条动画，请将CSS动画与

笔划dasharray

和

笔划dashoffset

一起使用。代码中的注释

/*用于演示*/
svg{
宽度：100px；
高度：100px；
边框：1px纯黑；
} 
/*隐藏关闭图标*/
svg.off{
不透明度：0；
}
/*当用户悬停SVG时，on图标将隐藏*/
svg:hover.on{
不透明度：0；
}
/* ... 此时将显示关闭图标*/
svg:hover.off{
不透明度：1；
}
/*笔划的初始值
--这些可以通过JS获得，
--或者，您也可以为CSS手动计算它们
*/
svg.line{
行程偏移：40px；
笔划阵列：40px；
}
/*当用户悬停在SVG上时，为线条设置动画*/
svg:hover.line{
动画：addLine 800ms向前；
}
/*线动画的值*/
@关键帧添加线{
从{
行程偏移：40px；
}
到{
笔划偏移：0；
}
}

一种使用CSS的方法

您只需显示/隐藏悬停时所需的图标。要设置线条动画，请将CSS动画与

笔划dasharray

和

笔划dashoffset

一起使用。代码中的注释

/*用于演示*/
svg{
宽度：100px；
高度：100px；
边框：1px纯黑；
} 
/*隐藏关闭图标*/
svg.off{
不透明度：0；
}
/*当用户悬停SVG时，on图标将隐藏*/
svg:hover.on{
不透明度：0；
}
/* ... 此时将显示关闭图标*/
svg:hover.off{
不透明度：1；
}
/*笔划的初始值
--这些可以通过JS获得，
--或者，您也可以为CSS手动计算它们
*/
svg.line{
行程偏移：40px；
笔划阵列：40px；
}
/*当用户悬停在SVG上时，为线条设置动画*/
svg:hover.line{
动画：addLine 800ms向前；
}
/*线动画的值*/
@关键帧添加线{
从{
行程偏移：40px；
}
到{
笔划偏移：0；
}
}

---

该页面上的动画图标相当复杂（需要更复杂）。但基本上他们所做的是从右到左滑动一个矩形遮罩，覆盖第一个图标，并揭开第二个图标

这里是一个简化版本，使用纯CSS，希望能让它更清晰

svg{
宽度：100px；
高度：100px；
}
/*悬停时将两个遮罩向左滑动*/
svg：悬停#底部矩形，
svg:hover#top rect
{
转换：转换500ms；
转换：转换（-24px，0px）；
}
/*不悬停时将两个遮罩滑回右侧*/
svg#底部矩形，
svg#顶部矩形{
转换：转换500ms；
转换：转换（0px，0px）；
}

---

该页面上的动画图标相当复杂（需要更复杂）。但基本上他们所做的是从右到左滑动一个矩形遮罩，覆盖第一个图标，并揭开第二个图标

这里是一个简化版本，使用纯CSS，希望能让它更清晰

svg{
宽度：100px；
高度：100px；
}
/*悬停时将两个遮罩向左滑动*/
svg：悬停#底部矩形，
svg:hover#top rect
{
转换：转换500ms；
转换：转换（-24px，0px）；
}
/*不悬停时将两个遮罩滑回右侧*/
svg#底部矩形，
svg#顶部矩形{
转换：转换500ms；
转换：转换（0px，0px）；
}

如果唯一的更改是行，为什么要使用两个图标？您可以只在第一个图标上设置路径动画？因为如果仔细观察，“关闭”图标具有完全不同的svg路径，并且两者之间存在“间隙”。如果唯一的更改是线条，为什么要使用两个图标？你可以在第一个图标上设置路径动画？因为如果你仔细观察，“关闭”图标有完全不同的svg路径，两者之间有一个“间隙”。我考虑过这个解决方案，但正如你在示例网站中看到的，它们的动画在线交叉时更加平滑。我考虑过这个解决方案，但正如您在示例网站中所看到的，当线条交叉时，它们的动画更加平滑。