霓虹灯标志CSS动画

Question

我想要在网站上创建徽标的霓虹灯标志，还要发送电子邮件签名。

我有几个问题，我希望善良的人可以帮助我。

1. 对于电子邮件签名，我认为动画gif最好 - 只是为了安全吗？但是，我可以使用html模板 - 但是我不确定网站版本上使用的CSS动画会在（或众多）电子邮件客户端中正确呈现吗？

2. 我在标记中使用键入的字母找到了CSS动画霓虹灯的示例。 http://www.broken-links.com/tests/animations/

我想知道这种相同的CSS动画技术是否适用于平面图像？ CSS如何知道字母边缘的位置？使用这种技术透明的png会正常工作吗？如果有帮助，我将图像作为像素或矢量基础？

这是我要创建的徽标和快速模拟霓虹灯标志的屏幕截图。

提前致谢！

Answer 1

您链接的示例仅使用文字。它使用@font-face规则加载自定义字体，然后设置字体颜色的动画。它的颜色很扁平。

您尝试做的事情涉及更多。最简单的解决方案可能是将每个字母分成自己的图像，然后您可以为opacity属性设置动画。这可能是你所希望的最好的。

Answer 2

我不确定我是否理解你...但是这会对投影在霓虹文字上的透明图像应用阴影..

-webkit-filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.5));

filter: url(/assets/svg/shadow.svg#drop-shadow);

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='rgba(0,0,0,0.3)')";

filter: progid:DXImageTransform.Microsoft.S

Answer 3

此链接还解释了很多关于阴影和盒子阴影的问题 - 由于浏览器支持它不是我的项目所需要的，但对于搜索此投影CSS技巧的其他人可能会有用。

http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison