tiltShift.js – CSS3 实现移轴镜头

tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果。使用非常简单,使用 data 属性配置参数。温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览

 

效果演示      插件下载

  HTML 示例:

<img src="url" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y">
  • -position(0-100),定义对焦点的位置。
  • -blur(0 – ?),模糊半径。设置为1或2比较合适。
  • -focus(0-100),焦点的区域大小。
  • -falloff (0-100),完全焦点和完全模糊之间的区域大小。
  • -direction(“x”,“y”,或 0-360),方向。

JavaScript 调用示例:

$(function() {       $('.tiltshift').tiltShift();  });

 

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《tiltShift.js – CSS3 实现移轴镜头》
文章链接:https://www.lbyxlz.com/tiltshift-js-css3-%e5%ae%9e%e7%8e%b0%e7%a7%bb%e8%bd%b4%e9%95%9c%e5%a4%b4/
分享到: 生成海报

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

点击按钮进行验证

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活