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

本文最后更新于2017-10-12,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
打赏
未经允许不得转载:

作者: 会飞的鱼, 转载或复制请以 超链接形式 并注明出处 会飞的鱼
原文地址: 《css彩虹渐变文字[WebKit]》 发布于2017-10-12

评论

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

css彩虹渐变文字[WebKit]

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏