静听风雨

倚窗静听风雨声，心甘淡泊厌浮名，闲来勤读万卷书，细品年华寄逸情。

日志

关于我

静听风雨

文章分类

LOFTER精选

八招诀窍，教你实力撩妹 >

网易考拉推荐

【代码应用】十三种图片特效

2015-06-02 06:32:37| 分类： ╠代码运用╣ | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

本文转载自静中有动《【代码应用】十三种图片特效》

素材：取之网络

十三种图片特效

编辑：静中有动

特效1:显示椭圆透明效果

图片特效 - 静中有动 - 静中有动的休闲屋

代码

特效2:显示矩形透明效果

代码

特效3:显示线状透明效果

代码

特效4:显示垂直反相效果

代码

<IMG title="静中有动的涂鸦" style="FILTER: flipv(color=#ffedff)" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" width=图片宽度 border=0>

特效5:显示水平反相效果

代码

<IMG title="静中有动的涂鸦" style="FILTER: FlipH" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" width=图片宽度 border=0>

特效6:显示黑白图片效果

代码

<IMG title="静中有动的涂鸦" style="FILTER: gray(color=#ffedff)" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" width=图片宽度 border=0>

特效7:显示X光负片效果

代码

<IMG title="静中有动的涂鸦" style="FILTER: xray(color=#ffedff)" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" width=图片宽度 border=0>

特效8:显示色彩对换效果

代码

<IMG title="静中有动的涂鸦" style="FILTER: Invert" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" width=图片宽度 border=0>

特效9:显示发光彩边效果

代码

注释：

(color为发光颜色代码,strength是发光强度,滤镜宽=图宽+发光强度x2，滤镜高=图高+发光强度x2+10)

特效10:显示边框投影效果

代码

注释：

(color为发光颜色代码,direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+25)
濾鏡高=图高40)

特效11:显示边框倒影效果

代码

注释：

(color为发光颜色代码,offX水平位移offY垂直位移(可正可负),滤镜宽=图宽+水平位移绝对值+10,滤镜高=图高+垂直位移绝对值+20)

特效12:显示模糊效果

代码

注释：

(direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+15,濾鏡高=图高+30)

特效13:显示扭曲效果

代码

注释:

(freq频率(>0)strength振幅强度(>0)lightstrength波峰强度(0~100愈高越黑)phase起始相位(0~100),滤镜宽=图宽+振幅强度x2，滤镜高=图高+振幅强度x2+10)

彩色渐变字教程 - 静中有动 - 静中有动的休闲屋

请保持本博的个性风格，朋友如需要此内容而不想显现来源的，请复制上面的内容自主处理

静听风雨推荐阅读：

多图单曲音画代码 2017.06.06 多图单曲音画代码

多图多曲播放器代码 2017.06.05 多图多曲播放器代码

横向移动的音画代码 2017.06.02 横向移动的音画代码

大图音画代码 2017.05.17 大图音画代码

遮罩图片浏览器代码 2017.05.10 遮罩图片浏览器代码

自动换页相册的制作代码

2017.05.02 自动换页相册的制作代码

图片上加视频透明动画的代码

2017.05.01 图片上加视频透明动画的代码

虚线框滚动条样式及代码

2017.03.16 虚线框滚动条样式及代码

10款博客导航滚动条代码

2015.09.16 10款博客导航滚动条代码

【代码应用】图片的来回移动和平铺

2015.08.29 【代码应用】图片的来回移动和平铺

【代码应用】图片加边框的几种形式

2015.08.10 【代码应用】图片加边框的几种形式

评论这张

转发至微博

阅读(1161)| 评论(788)

推荐转载

历史上的今天

在LOFTER的更多文章

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_087071092085089075082083086070072084082070083095094066087080',
              blogTitle:'【代码应用】十三种图片特效',
              blogAbstract:'<div align=\"center\"   \>\n<div\></div\><div\></div\><div\></div\><table style=\"WIDTH: 865px; HEIGHT: 2px;\"   cellspacing=\"39\"   cellpadding=\"0\"   background=\"http://img.ph.126.net/sG_zPdRswxWq_RsWkyhbFw==/3388395769643839521.jpg\"   \>\n<tbody\>\n<tr\>\n<td\>\n<div style=\"MARGIN-TOP: 8px; MARGIN-LEFT: 2px;\"   \>\n<table border=\"0\"   cellspacing=\"0\"   bordercolorlight=\"#0a0000\"   bordercolordark=\"#0a0000\"   cellpadding=\"2\"   width=\"785\"   bgcolor=\"#0a0000\"   \>\n<tbody\>\n<tr\>\n<td bgcolor=\"#0a0000\"   bordercolorlight=\"#440000\"   background=\"http://img.ph.126.net/xGGko--Xt4JG_G86PtnQ1g==/3335196999045005032.gif\"   bordercolordark=\"#000000\"   border=\"0\"   \>\n</td\></tr\></table\></div\></td\></tr\></table\></div\>',
              blogTag:'图片特效',
              blogUrl:'blog/static/235798136201471034525853',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1490247338226,
              publishTime:1433197957297,
              permalink:'blog/static/235798136201471034525853',
              commentCount:788,
              mainCommentCount:788,
              recommendCount:66,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<a hidefocus="true" target="_blank" href="http://inpin.blog.163.com/blog/static/2633040402016620112520219/"><img onload="var nimg = new Image(); nimg.src=\'http://blog.163.com/newpage/images/analyse.png?lofter_single&t=\'+new Date().getTime()" border="0" src="http://imglf.nosdn.127.net/img/TlZCWHdFWFpidkQ1dGtJK1N5cFRBNzBLUFFPYnJEVi9LWk1KTzJlMTU2Yz0.jpg"/></a>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/235798136201471034525853">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 博客风格 - 手机博客 - 下载LOFTER APP - 订阅此博客

静听风雨

导航

日志

【代码应用】十三种图片特效

历史上的今天

最近读者

热度

在LOFTER的更多文章

评论

页脚