我们平常在浏览网页的时候,经常会看到一些显示特效的文字,像这样的特效文字大多数都是利用css
样式来实现的。在这里,我向大家介绍几种文字的特效。
1、文字的发光效果
主要通过css样式的glow滤镜属性实现的,filter:glow(color=color_value,Strength=value)
Color:表示边缘光晕的颜色
Strength:表示边缘光晕的强度大小,范围在1~255之间。
代码:css样式
<style type="text/css">
.tb{
font-size: 40px;
filter:glow(color=skyblue,direction=2);
font-family: 华文行楷;
}
</style>
2、文字的阴影效果
主要通过css样式的dropshadow滤镜属性实现的,filter:glow(color=color_value,offx=value,offy=value,positive=value);
Color:表示阴影的颜色
Offx:x轴方向阴影的偏移量。
Offy:y轴方向阴影的偏移量。
Positove:取值为false或true,true表示不透明像素建立可见的阴影,false表示为透明像素可见阴影。若不写表示为默认,默认为true。
代码:css样式
.tb1{
font-size: 40px;
filter:dropshadow(color=green,offx=3,offy=3);
font-family: 华文隶书;
}
3、文字的渐变阴影效果
主要通过css样式的shadow滤镜属性实现的,filter:glow(color=color_value,direction=value);
Color:阴影的颜色。
Direction:设定渐变阴影的方向,渐变阴影是按照顺时针方向进行的,0º表示垂直向上,之后每45º为一个单位,默认值为270º。
.tb2{
font-size: 40px;
filter:shadow(color=skyblue,direction=135);
font-family: 黑体;
}
4、文字的图案填充效果
主要通过dropshadow和chroma滤镜相结合来实现。Chroma样式
Filter:chroma(color=color_value);
Color:透明的颜色,如color为#ffcc00,则滤镜作用范围内的所有为#ffcc00的颜色都将变为透明,包括图片的像素。
<div style="background-image: url(ahcme.jpg);width: 100%">
<div style="filter:chroma(color=#cccccc)dropshadow(color=#777777,offx=-1,offy=-1,positive=2);
color:#cccccc;background-color: #ffffff;width: 100%;font: bold 50pt 黑体;" >
文字的图案填充效果
</div>
5、文字的探照灯效果
主要通过light滤镜相结合来实现。Chroma样式
filter:light;
在javascript中,可以使用document对象来获得元素的light滤镜对象,然后通过调用light滤镜对象中的方法来实现文字的发光效果,light滤镜中包含的方法如下:
方法 |
说明 |
addAmbient |
加入包围的光源 |
addCone |
加入锥形光源 |
addPoint |
加入点光源 |
changcolor |
改变光的颜色 |
changstrength |
改变光源的强度 |
clear |
清除所有的光源 |
moveLight |
移动光源 |
还有关于其他的各种问题特效,等有时间整理出来之后再奉献给各位!
摘要: 在我们进行网页的设计中,我们会经常的用到鼠标的各种形状,鼠标形状的改变主要是在css文件中实现的。我们可以在css中设置cursor的属性值来实现不同的鼠标指针形状,cursor的不同属性值对应着相应的鼠标形状,下面是我整理的一些鼠标形状和cursor属性值:
阅读全文