css 制作文字模糊發(fā)散效果怎么做
要在CSS中制作文字的模糊發(fā)散效果,可以使用text-shadow
屬性,并為它指定大量的小陰影,每個(gè)小陰影都有不同的模糊半徑和位置,從而創(chuàng)建出一種模糊發(fā)散的視覺(jué)效果。
下面是一個(gè)簡(jiǎn)單的例子,展示如何使用CSS制作文字的模糊發(fā)散效果:
.blur-explosion {
color: #333;
font-size: 5em;
text-align: center;
font-weight: bold;
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-2px 0 0 #fff,
2px 0 0 #fff,
-3px 1px 0 #fff,
3px 1px 0 #fff,
-4px 2px 0 #fff,
4px 2px 0 #fff,
-5px 3px 0 #fff,
5px 3px 0 #fff,
-6px 4px 0 #fff,
6px 4px 0 #fff,
-7px 5px 0 #fff,
7px 5px 0 #fff,
-8px 6px 0 #fff,
8px 6px 0 #fff,
-9px 7px 0 #fff,
9px 7px 0 #fff,
-10px 8px 0 #fff,
10px 8px 0 #fff,
-11px 9px 0 #fff,
11px 9px 0 #fff;
}
<div class=“blur-explosion”>發(fā)散模糊</div>
這段代碼會(huì)創(chuàng)建一個(gè)文字模糊發(fā)散的視覺(jué)效果,通過(guò)增加text-shadow的數(shù)量和模糊半徑的范圍,可以進(jìn)一步增強(qiáng)這種效果。注意,為了防止文字變得不可讀,應(yīng)該確保陰影顏色不會(huì)與文字本身的顏色相同,這里使用的是白色#fff作為陰影顏色。