css彩虹渐变文字[WebKit]

用户8099761

发布于 2023-05-10 21:45:27

7810

发布于 2023-05-10 21:45:27

文章被收录于专栏：私人订制

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

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~

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>