css彩虹渐变文字[WebKit]

  • 内容
  • 相关

以前看到过彩虹文字,觉得挺好玩的,今天就去仿着弄了下。(其实和看到的那个差不多_(•̀ω•́ 」∠)_)

css代码:
<style type="text/css">
.rainbow{
    background-image: -webkit-gradient(linear,left top,right top,color-stop(0,#f22),color-stop(0.15,#f2f),color-stop(0.3,#22f),color-stop(0.45,#2ff),color-stop(0.6,#2f2),color-stop(0.75,#2f2),color-stop(0.9,#ff2),color-stop(1,#f22));
    background-image: gradient(linear,left top,right top,color-stop(0,#f22),color-stop(0.15,#f2f),color-stop(0.3,#22f),color-stop(0.45,#2ff),color-stop(0.6,#2f2),color-stop(0.75,#2f2),color-stop(0.9,#ff2),color-stop(1,#f22));
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    }
</style>

html调用:
<span class="rainbow">彩虹文字(<ゝω·)☆~Kira~</span>

效果:彩虹文字(<ゝω·)☆~Kira~

如果你是一片空白的话,还是看这个图吧
css彩虹渐变文字[WebKit]

P.S.这个是针对webkit核心浏览器的,其他的我没看也没弄过。如果哪位菊苣有心情弄的话,顺便分享出来呗。还有我测试的时候其他内核的浏览器会显示空白。所以我就用了php/js判断浏览器内核,然后是否输出该样式。

php方法:
<?php
if(strpos($_SERVER['HTTP_USER_AGENT'],"AppleWebKit")) echo '<span class="rainbow">彩虹文字(<ゝω·)☆~Kira~</span>';
else echo '<span style="color:#ff6600">彩虹文字(<ゝω·)☆~Kira~</span>';
?>

Javascript方法:
<script>
var agent = navigator.userAgent.toLowerCase();
if(agent.indexOf('applewebkit')>0) document.write('<span class="rainbow">彩虹文字(<ゝω·)☆~Kira~</span>');
else document.write('<span style="color:#ff6600">彩虹文字(<ゝω·)☆~Kira~</span>');
</script>

如有错误请指出DA☆ZE

本文标签:

版权声明:若无特殊注明,本文皆为《会飞的鱼》原创,转载请保留文章出处。

本文链接:css彩虹渐变文字[WebKit] - https://f162.cn/post/290

发表评论

电子邮件地址不会被公开。 必填项已用*标注

未显示?请点击刷新

允许邮件通知