前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >文字彩色特效代码

文字彩色特效代码

作者头像
白黎
发布2023-03-09 09:23:36
3.5K1
发布2023-03-09 09:23:36
举报
文章被收录于专栏:Baili Blog
图片[1]-文字彩色特效代码-Baili Blog
图片[1]-文字彩色特效代码-Baili Blog

这个文字彩色特效代码挺好看的,适合做信封、句子啥滴! 文字彩色特效代码采用的是HTML+CSS+JS,如果不要颜色边框的话,删除CSS即可。 现在分享给大家吧!

代码:

  此处内容已隐藏,请评论后刷新页面查看.

效果:

.text_body{margin:100px auto;background-color:white;}.text{position:relative;margin:100px auto;padding:1em;border:1em solid transparent;background:linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg,red 0,red 12.5%,transparent 0,transparent 25%,#58a 0,#58a 37.5%,transparent 0,transparent 50%) 0 / 5em 5em;}

初恋是让人难忘,觉得美好。为什么?不是因为他/她很漂亮或很帅,也不是因为得不到就是好的,而是因为人初涉爱河时心理异常纯真,绝无私心杂念,只知道倾己所有去爱对方,而以后的爱情就没有这么纯洁无暇了。纯真是人世间最可贵的东西,我们可求的就是它。

var text = $("#container").text().trim(); $("#container").html(""); for(var i = 0;i < text.length;i++){ $("#container").append("<span>"+text[i]+"<\/span>") } var s = 0; var tim = setInterval(function(){ $("#container span").eq(s++).css("color",getColor()).show(); if(s == text.length){ clearInterval(tim) } }, 100) function getColor(){ return "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")"; }

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 代码:
  • 效果:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档