用CSS实现图片特效代码

来源：互联网发布：秦文字编淘宝编辑：程序博客网时间：2024/04/28 08:24

上边这张图片是原图。以下的图片效果都以此图为例。如本图的代码为:

可根据以下各种图片效果的代码进行相应的修改。1.透明效果代码：

说明：opacity:开始处的透明度（0－100）； finishOpacity:结束处的透明度（0－100）；style=0 平均透明、 =1 线状透明、 =2 圆形透明、 =3 菱形透明。2.左右翻转效果代码：

3.上下翻转效果代码：

4.灰调效果代码：

5.X光效果代码：

6.色彩对换效果代码：

7.发光边框效果代码：

说明：color=#4A7AC9发光颜色的代码； strength=10发光强度； WIDTH: 148px滤镜宽=图宽+发光强度x2（128＋10x2=148）； HEIGHT: 158px滤镜高=图高+发光强度x2+10（128+10x2+10=158）8.投影效果代码：

说明：color=#4A7AC9投影颜色的代码； direction=135投影方向135度（只能是45度的倍数；如:45,90,135,180,225,270,315度）； WIDTH: 153px滤镜宽=图宽+25（128＋25=153)； HEIGHT: 168px滤镜高=图高+40(128+40=168)9.阴影效果代码：

说明：color=#4A7AC9阴影颜色的代码； offX=8水平位移8； offY垂直位移8（位移可正可负）； WIDTH: 143px滤镜宽=图宽+水平位移绝对值+10（128+8+10=146）；HEIGHT: 156px滤镜高=图高+垂直位移绝对值+20（128+8+20=156）10.模糊效果代码：

说明：direction=45模糊方向45度（只能是45度的倍数；如:45,90,135,180,225,270,315度）； WIDTH: 143px滤镜宽=图宽+15（128＋15=143)； HEIGHT: 158px滤镜高=图高+30(128+30=158)11.波形效果代码：

说明：freq=2频率(>0)； strength=9振幅强度(>0)； lightstrength=5波峰强度(0~100愈高越黑)； phase起始相位(0~100)； WIDTH: 146px滤镜宽=图宽+振幅强度x2（128+9x2=146）； HEIGHT: 156px滤镜高=图高+振幅强度x2+10（128+9x2+10=156）