logo标签列表

如何最佳应用投影效果？

javascriptjquerycssanimationuser-interface
4
什么是应用投影阴影的最佳方法？我正在制作一个网站，其中使用了大量的投影阴影，但我一直在寻找最好的方法来实现它。由于这个网站具有相当多的动画效果，因此阴影需要与之很好地配合。

我尝试了一个jQuery阴影插件。阴影看起来不错，而且易于使用，但速度较慢，并且无法很好地与任何动画效果配合使用（需要大量重绘，非常卡顿）。

我还尝试创建自己的jQuery扩展程序，将我的元素包装在几个灰色div中，然后略微偏移它们以产生阴影效果。这个方法效果很好。它快速响应动画效果。但是，由于所有内容都被包装在这些阴影div中，所以DOM操作/遍历变得麻烦。

我知道一定有更好的方法，但这并不是我的强项。你有什么想法吗？
这是其中一件在所有浏览器中都难以有效地运行且性能良好的事情。我希望随着IE9（是的，第9版）开始支持CSS3，这个问题将得到解决，但对于IE6、IE7和IE8，你会发现这相当困难。 - scunliffe
你有没有查看过这个网址：https://dev59.com/GXVC5IYBdhLWcg3w2lCI？ - Atanas Korchev
5个回答
3

ShadedBorder 是一个好看且易于使用的阴影库。快来看看吧！

1

您不需要将那些阴影div包裹在其他内容周围，只需稍微设置它们的倾斜度并将它们放置在较低的z-index上！-)

0
如果您的主要问题是导航DOM，则只需为元素添加类和/或ID，并使用JQuery选择器引用它。如果您将引用存储在变量中，那就更好了，这样您就不需要太频繁地选择它。
0
很遗憾，在任何IE版本中都不支持此功能。 - Dónal
0

这在很大程度上取决于您的图像需要多频繁更改以及它们所覆盖的彩色区域。因为我猜测您需要关注IE6兼容性，大多数alpha-PNG解决方案会导致可怕的抖动，这将使您花费更多时间进行性能优化，而不是您想要的猜测。

为了解决这个问题，我们过去使用一个缓存PHP脚本来调用图像，由此自动应用预定义的背景颜色来添加阴影，因此我们不必依赖任何透明度。这样可以实现更快的下载（较少的HTTP请求）和更快的界面，因为其中涉及的Javascript/CSS魔法更少。

我知道这是一个非常老式的解决方案，如果您的图像是静态的，那么上述解决方案完全可行，但是跨浏览器兼容和动画可能会迫使您采用这种风格的解决方案。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接