【CSS】制作朦胧的文字

如何使用CSS3制作朦胧的文字?

 


在CSS3当中有一个text-shadow 属性,用来给文字添加阴影特效。

像是这样子:

华枝春满,天心月圆

代码:<h1 style="text-shadow: 5px 5px 5px #FF0000;">华枝春满,天心月圆</h1>

text-shadow的四个参数: (X轴  Y轴  Rpx  color;)
属性说明(顺序依次对应):

  1. 阴影的X轴(可以使用负值)   
  2. 阴影的Y轴(可以使用负值) 
  3. 阴影模糊值(大小)
  4. 阴影的颜色。

本来以为只是用于生成老掉牙的艺术字,但是今天看到了萌百上的一个特殊的用法(看动漫学代码.jpg)

对文字进行 模糊化处理

原理是:阴影是模糊的,只要把文字本身进行完全透明处理(利用RGBA的A属性使得字体透明),只显示阴影(xy轴不进行偏移)即可模糊原来的文字。而且选中后会取消效果,特别棒。

举例说明:
和羞走,倚门回首,却把青梅嗅(不模糊的效果)
和羞走,倚门回首,却把青梅嗅(模糊度为2px的效果)
和羞走,倚门回首,却把青梅嗅(模糊度为5px的效果)
和羞走,倚门回首,却把青梅嗅(模糊度为8px的效果)

代码:<span style="color: rgba(0,0,0,0); text-shadow: 0px 0px 2px #8A2BE2;">和羞走,倚门回首,却把青梅嗅</span>(模糊度为2px的效果)

补充:

RGBA是颜色的一种表达形式,例如

color: rgba(0,0,0,0)

有四个参数

  R:红色值。正整数 (0~255)

  G:绿色值。正整数 (0~255)

  B:蓝色值。正整数(0~255)

  A:透明度。取值0~1之间(为0时完全透明)

本模糊效果即是用透明度A取值0实现的,外加原地阴影。

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注

1 × 1 =