Heim > Artikel > Web-Frontend > CSS-Filter implementieren verschiedene Texteffekte
CSS-Filter implementieren verschiedene Texteffekte
- PHP中文网Original
- 2016-05-16 12:12:112171Durchsuche
CSS-Filter werden verwendet, um Text zu ändern und verschiedene schöne Texteffekte zu erzielen. Wenn Sie ihn gut verwenden, wird er den Text auf Ihrer Webseite schöner und attraktiver machen Auf dieser Seite werden insgesamt verschiedene Effekte wie Dropshadow, Glow, Alpha, Progid, Progid:DXImageTransform.Microsoft.wave, Progid:DXImageTransform.Microsoft.Shadow usw. demonstriert, darunter fast alle CSS-Filter, was ziemlich gut ist.
<html>
<head>
<title>css滤镜实现各种文字效果</title>
<meta http-equiv=content-Type content="text/html;charset=gb2312">
<style>
.abc { line-height: 22px}
.t12 {
font-family:微软雅黑;
font-size: 15px;
font-weight: lighter;
color: ##C3C1C1;
Filter: dropshadow(color=#ffffff,offx=1,offy=1);
TEXT-ALIGN: center;
TEXT-DECORATION: none
}
</style>
</head>
<body bgcolor=#C3C1C1 style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=green,endColorStr=white);">
<center>
<table>
<tr>
<td style="FILTER: glow(color:#308148,strength=5);color: #ffffff;font-size:18px;font-family:隶书">今夜你会不会来，你的爱还在不在？</TD>
</tr>
</table>
<br><br>
<span style="color:#09ff11;font: italic 900 16pt 隶书;width: 220;filter: shadow(color=red,direction=135);">自己动手 丰衣足食</span>
<br><br>
<table bgcolor=#aaaaaa style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=green,endColorStr=white);"><tr><td style="filter:dropshadow(offX=1,offY=1,color=#000000);color:#ffffff;font-size:18px;font-family:华文行楷">雅语独喃<b><font color='#22FF22'>知</font><font color='#FF2222'>往</font><font color='#001199'>观</font><font color='#00fffa'>来</font></b></td></tr></table>
<br><br>
<style type="text/css">.3dfont { FILTER: glow(color=lime,strength=0) shadow(color=lime,direction:135); WIDTH: 678;font-family:隶书;font-size:16px; } </style>
<center>
<table border="0" width="569"><tr><td width="100%" class="3dfont"><font color="#008040">身高不过1米68，腰圆腿粗像西瓜，头大嘴小鼻梁趴，一张大嘴缺门牙！</font></td></tr></table>
<br><br>
<table width="400" border="1" cellspacing="0" cellpadding="0" align="center" bordercolor="#999999" bgcolor="#D1D2A4">
<tr>
<td style="padding:15px;letter-spacing:3px; COLOR: #6b6c35; FILTER: dropshadow(color=#ffffcc,offx=1,offy=1);" >北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。</td>
</tr>
</table>
<br><br>
<table width="312" height="123" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#ffdf03"><div style="filter:progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, color=black);color:orange;width:100%;font-family:华文新魏;font-size:17px;">织梦好，蚂蚁好；蚂蚁好，织梦更好</div></td>
</tr>
</table>
<br><br>
<table width="234" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="filter:blur(add=1,direction=135,strength=7)">
<tr>
<th scope="row" style="font-family:华文行楷;font-size:18px;color:red;">我想让里面的字正常显示</th>
</tr>
</table>
<br><br>
<table>
<tr>
<td width="510"><div style="height:1;width:100%;font-family:impact;font-size:14pt;color:deeppink;display:block;
filter:progid:DXImageTransform.Microsoft.wave(Strength=3)"><p align="center">看小蜜的身材怎么样?您是否已爱上了她! </div></td>
</tr>
</table>
<table>
<tr>
<td width="510"><div style="filter:progid:DXImageTransform.Microsoft.engrave(bias=0.5); height:1;font-size:20pt;font-family:impact;background-color:blue"><p align="center">I just couldn't help it.</div></td>
</tr>
<tr>
<td width="510"><div style="filter:progid:DXImageTransform.Microsoft.emboss(bias=0.5);height:1;font-family:impact;font-size:20pt;background-color:blue"> <p align="center">We'd better be off.</div></td>
</tr>
<tr>
</table>
<br><br>
<table>
<tr>
<td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1) shadow(color=blue,direction=135,strength=6)" align="center"><font color="blue" size="7" face="华文新魏">源码爱好者网页特效</font></td>
</tr>
<tr>
<td style="FILTER: glow(color=#bb0909,strength=2) shadow(color=#22BB09,direction=135)" align="center"><font color=#E1E4EC size=6 face="华文新魏"><b>让自己不至于在等待回贴的过程中血气上涌</b></font></td>
</tr>
<tr>
<td style="FILTER: glow(color=yellow,strength=4) mask(color=green) chroma(color=#B4BBCF)" align="center" height=54><font color=#fa2233 size=6 face="华文彩云"><b>一个神奇的测试</b></font></td>
</tr>
</table>
<br><br>
<style type="text/css">
.a1 {
font-size: 32px;
color: red;
filter: dropshadow(color=#fa00fd,offX=1,offY=1,positives=true);
height: 20px;
}
</style>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><div class="a1">看书 看棋 看美人 赏花 赏月 赏秋香</div></td>
</tr>
</table>
</center>
</body>
</html>Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：10 Gründe, CSS_CSS/HTML zu lernenNächster Artikel：10 Gründe, CSS_CSS/HTML zu lernen