我正在尝试用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>