纯CSS3文字渐变内发光投影效果_html-js-css

概述.Jmr622 { display:none; } 今天群上面同志们在讨论css3内发光效果，自己也就研究一下，写了个效果出来，涉及css3投影，渐变，蒙版，伪类等知识点，现在写下设计思路，仅供参考。发个效果图大家看先： &网ｌieｈｕｏ．ｎｅｔ一般我们都是用css3的box-shadow来实现盒投影，用text-shadow来实现…

今天群上面同志们在讨论CSS3内发光效果，自己也就研究一下，写了个效果出来，涉及CSS3投影，渐变，蒙版，伪类等知识点，现在写下设计思路，仅供参考。发个效果图大家看先： &网

ｌIEｈｕｏ．ｎｅｔ

一般我们都是用CSS3的Box-shadow来实现盒投影，用text-shadow来实现文字投影，Box-shadow设置方型盒子投影，用raIDus的话可以让盒子产生圆角，看起来就很圆滑舒服，一般的写法是这样的： /网

ｌiｅｈuｏ．ｎｅｔ

vｅｒｙｈｕｏ．ｃｏm

1px(水平方向偏移) 1px(垂直方向偏移) 5px(阴影羽化) #000(颜色); veｒyhuｏ．coｍ

当偏移量为负数时就向反方向偏移，试试就明白了，这里不贴图。ｌiｅｈｕo．ｎｅｔ

这个是一般的投影效果，如果是内阴影，那么就加个“inset”属性，写法如下：

ｌIEｈｕｏ．ｎｅｔ

veryhｕｏ．ｃom

这样就变成了PS里面的内阴影，效果很赞，很实用，如果需要内发光效果，则背景底色深，投影颜色浅，这样就会感觉是发光，而背景颜色深，投影颜色浅，这样看起来就是投影了； wfuyu.com

不过群里面讨论的是文字的投影内发光，上面的是顺便提提而已，下面才是正题：

verｙｈuo.com

文字是用text-shadow来产生阴影，而且产生的时候能跟随文字的轮廓投影，如下所示：

ｌiｅhｕｏ．ｎｅｔ

vｅrｙｈuｏ．ｃom

如果用Box-shadow的话效果是这样的：ｌIEｈｕｏ．ｎｅｔ

ｌiｅｈｕｏ.ｎeｔ

ｌiｅｈuｏ．ｎｅｔ

会根据放文字容器的盒子来投影(我设定了容器的宽度200px，背景未设定颜色透明)，不会跟随文字轮廓投影，效果不是我们所要的；

&网

然而text-shadow没有inset属性，这个就比较棘手了，怎么才能实现文字内投影，同时还有文字渐变？ｌiｅｈｕo．ｎｅｔ

一层一层来，一般ps处理文字效果都是一层层的剥离，先从文字内发光入手：ｌIEｈｕｏ．ｎｅｔ

我写了这么一个页面试内发光，代码如下：ｌiｅｈｕｏ.ｎｅｔ

<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><head><Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /><Title>无标题文档</Title><style type="text/CSS">body{ background:#CCCCCC;}.text{ Font-size:100px; Font-family:"微软雅黑"; color:rgba(0,0); Font-weight:bold; position:relative;text-shadow: 0px 0px 0px #000000;}.text:after{ content:"广州-龙"; position:absolute; left:0px; text-shadow:0px 0px 3px #fff;}</style></head><body><div class="text">广州-龙</div></body></HTML><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>

&网

提示：可修改后代码再运行!

wfuyu.com

效果图如下： vｅｒｙｈｕｏ．ｃｏm

总结

以上是内存溢出为你收集整理的纯CSS3文字渐变内发光投影效果全部内容，希望文章能够帮你解决纯CSS3文字渐变内发光投影效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1022387.html

纯CSS3文字渐变内发光投影效果

发表评论

评论列表（0条）