html5 css3设置filter图片滤镜代码



70 278 93



特效描述:html5 css3设置 filter图片滤镜,html5 css3 filter图片滤镜十个效果示例,可调节,可叠加

代码结构

1. 引入CSS

<link href="css/index.css" type="text/css" rel="stylesheet">

2. 引入JS

<script src="js/index.js"></script>

3. HTML代码

<div>
  <img src="img/许巍.jpg" id="img/img" way="" onClick="css3_filter(this.id)" />
  <table cellspacing="0">
    <tr>
      <td name="button" id="grayscale" onClick="css3_filter(this.id)">灰度</td>
      <td name="button" id="sepia" onClick="css3_filter(this.id)">褐色</td>
      <td name="button" id="saturate" onClick="css3_filter(this.id)">饱和度</td>
      <td name="button" id="hue-rotate" onClick="css3_filter(this.id)">色相旋转</td>
      <td name="button" id="invert" onClick="css3_filter(this.id)">反色</td>
      <td name="button" id="opacity" onClick="css3_filter(this.id)">透明度</td>
      <td name="button" id="brightness" onClick="css3_filter(this.id)">亮度</td>
      <td name="button" id="contrast" onClick="css3_filter(this.id)">对比度</td>
      <td name="button" id="blur" onClick="css3_filter(this.id)">模糊</td>
      <td name="button" id="drop-shadow" onClick="css3_filter(this.id)">阴影</td>
    </tr>
    <tr>
      <td colspan="10" id="value">
       属性值(点击图片取消所有效果)
      </td>
    </tr>
    <tr>
      <td colspan="10" id="value" onClick="stylea()">
      灰度:<output id='1'>0</output>
      褐色:<output id='2'>0</output>
      饱和度:<output id='3'>0</output>
      色相:<output id='4'>0</output>
      反色:<output id='5'>0</output>
      透明度:<output id='6'>0</output>
      亮度:<output id='7'>0</output>
      对比度:<output id='8'>0</output>
      模糊:<output id='9'>0</output>
      <br />
      阴影x偏移量:<output id='10'>0</output>
      阴影y偏移量:<output id='11'>0</output>
      阴影距离:<output id='12'>0</output>
      阴影颜色:<output id='13'>0</output>
      </td>
    </tr>
    <tr>
      <td colspan="10">
        /*已用chorme49.0版本,Mozilla Firefox45.0测试可用!*/
      </td>
    </tr>
  </table>
  </div> 



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 拖动 拖拽 拖动插件 拖拽插件 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 其他 图片拖动 图片拖拽 文本框 text文本框 选项卡自动切换 按钮控制 编辑器

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到