用CSS实现图片特效代码
2010-04-13 19:55
495 查看
上边这张图片是原图。以下的图片效果都以此图为例。
如本图的代码为:
可根据以下各种图片效果的代码进行相应的修改。
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)
如本图的代码为:
可根据以下各种图片效果的代码进行相应的修改。
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)
相关文章推荐
- 用CSS实现图片特效代码
- 不用背景图片,只用css代码实现面包屑样式
- 【荐】JS实现的图片弹性拖动特效代码
- js实现图片向上连续滚动特效代码(含注释)
- Js+css实现的一款漂亮宽屏图片切换代码
- css 图片自适应宽度 CSS实现控制图片自适应显示宽度代码
- JS实现的防Windows的图片放大特效代码
- CSS 图片横向排列实现代码
- Android图片加载神器之Fresco-更灵活的设置加载特效[Java代码实现XML效果]
- css+javascript特效:时钟(无图片纯div实现)
- 用html+css+js实现的一个简单的图片切换特效
- 使用PHP下载CSS文件中的所有图片【几行代码即可实现】
- 【荐】CSS实现的鼠标点击小图无刷新放大图片代码
- +【CSS3】使用纯css代码实现图片轮播效果
- Android图片加载神器之Fresco-更灵活的设置加载特效[Java代码实现XML效果]
- DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码
- JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
- 各大门户网站Flash和JS实现的图片幻灯片切换特效代码文件下载
- 通过jquery实现图片随机排列特效代码
- jQuery实现图片轮播特效代码分享