当前位置:首页 > 教程资料 > 正文

作者: 会飞的鱼

全网最全的网络资源分享网站

手机扫码查看

标签:

emlogcssphp

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]》 发布于2017-10-12

分享到:
打赏

评论

允许邮件通知
切换注册

登录

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

切换登录

注册

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

支付宝扫一扫打赏

微信扫一扫打赏

emlog模板_fee主题

全站响应式布局自适应模板,后台模板在线设置,支持博客模式cms模式。

了解一下