我正在尝试用CSS 3样式替换目前在网站上使用的基于sIFR的闪光效果.我使用CSS 3可以很好地处理文本渐变效果,但原始的sIFR实现有多种颜色,而不仅仅是一种颜色的简单渐变.
有人能为我提供一个样式,使用沿水平轴的多种颜色样式化文本元素,如H2吗？
谢谢,
布莱恩.
解决方法
以下是SVG代码示例 – 使用FF4,Safari 5和Chrome进行测试.请注意,您必须将此服务作为Safari的XHTML页面来呈现它.这也适用于IE9,但我还没有测试过.
- <svg
- xmlns:svg="http://www.w3.org/2000/svg"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- version="1.1">
- <defs
- id="FooDefs">
- <linearGradient
- id="MyFirstGradient"
- x1="400"
- y1="350"
- x2="400"
- y2="420"
- gradientUnits="userSpaceOnUse">
- <stop
- id="stop1"
- style="stop-color:#1acf86;"
- offset="0" />
- <stop
- id="stop2"
- style="stop-color:#ff0051;"
- offset="0.25" />
- <stop
- id="stop3"
- style="stop-color:#1da1c9;"
- offset="0.625" />
- <stop
- id="stop4"
- style="stop-color:#e45f25;"
- offset="1" />
- </linearGradient>
- </defs>
- <text
- x="150"
- y="420"
- id="textBAR"
- style="font-size:72px;fill:url(#MyFirstGradient);">
- BIG TEXT TEST
- </text>
- </svg>
