0

我想创建一个标志的霓虹灯标志，用于网站和电子邮件签名。

我有几个问题希望有好心人能帮助我。

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

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

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

这是我想要创建的霓虹灯标志和快速模型样式的屏幕截图。

提前致谢！

娃娃标志

4

3 回答 3

2

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

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

于 2013-03-17T13:06:43.350 回答
1

im not sure if i understand you well.. but this will apply a drop-shadow to a transparent image as applied on the neon text..

-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
于 2013-03-17T19:57:40.057 回答
0

这个链接还解释了很多关于阴影和框阴影的信息——由于浏览器的支持，这不是我的项目所需要的，但可能对搜索这个阴影 CSS 技巧的其他人有用。

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

于 2013-03-18T00:38:06.293 回答