css彩虹渐变文字[WebKit]
0
1867
2017年10月12日
以前看到过彩虹文字，觉得挺好玩的，今天就去仿着弄了下。（其实和看到的那个差不多_(•̀ω•́ 」∠)_）
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]](https://0d077ef9e74d8.cdn.sohucs.com/qxOz7El_png)
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>
在线咨询
这个主题简介啊