视觉差网站(一)

一.前言

  看了好多视觉差的网站,觉得都不错,总结了一下

  大致有两类:

  • 一类是鼠标移动-元素随鼠标移动;
  • 另一类是鼠标移动向下滑制造页面背景视觉差;

二. 鼠标移动视觉差

    就是鼠标移动,使元素(img/svg)也移动(按比例);

  • demo1:https://codepen.io/jeft-hai/pen/eLeqqL;

                

         随着鼠标的移动,背后的circle/square/close 都会移动;

         做了兼容性处理:

              ie9以上/chrome等 使用transform;

              ie9及以下不支持transform;变换元素的margin-left/margin-top;

  • demo2:http://www.egopop.net

       这也是一个用margin处理的网站,所以兼容性非常好。

  • demo3:http://www.culturalsolutions.co.uk/

      也没有用transform,用的是left&margin;

三. 背景视觉差

  • demo1:  http://www.putzengel.at/#moveto_about;
  • demo2:  http://www.itosieceni.pl/


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部