我可以使用CSS3 / HTML 5在文本上使用水平多色渐变吗?

前端之家收集整理的这篇文章主要介绍了我可以使用CSS3 / HTML 5在文本上使用水平多色渐变吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试用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>
原文链接:https://www.f2er.com/css/217517.html

猜你在找的CSS相关文章