当前位置:首页 > 技术教程 > 技术文章 > 正文内容

【推荐】10个提升用户体验图像特效库

atao4年前 (2020-12-30)技术文章3960

image.png

1.imagehover

地址:https://github.com/ciar4n/imagehover.css

imagehover.css- 纯CSS3鼠标滑过图片效果动画库,44种鼠标滑过效果
1.gif


2. ImageTiltEffect

地址:https://github.com/codrops/ImageTiltEffect

TiltEffect是一款让图像跟随鼠标产生微妙立体倾斜效果的插件,使其有层次感和深度感。
1.gif
3.Magnifier.js

地址:https://github.com/mark-rolich/Magnifier.js

Magnifier 是一款实用纯js制作的图片放大镜插件。它有以下一些特定:

  • 可以使用鼠标滚轮放大缩小图片。

  • 可以通过js或data属性来设置选项。

  • 一次调用可以附加多张图片。

  • 用户可以自定义鼠标进入、离开、移动事件。

  • 加载大图片时可以显现等待文本。

image.png

4.gl-react-image-effects

地址:https://github.com/gre/gl-react-image-effects

通用的withReact示例应用程序与 Web。iOS和Android实现一起运行一个代码库( 一些特定的代码被设计成在平台上创建不同的UI )。

image.png

image.png

5.StickyImageEffect

受ultanoir网站启发的幻灯片显示,具有粘性图像效果。

地址:https://github.com/Anemolo/StickyImageEffect

image.png

6.HeatDistortionEffect

WebGL热变形效果全屏背景。

地址:https://github.com/lbebber/HeatDistortionEffect

image.png

7.ImageDraggingEffects

使用各种技术为图像设置的一组有趣的拖动效果。

地址:https://github.com/codrops/ImageDraggingEffects

1.gif

8.jQuery.BgSwitcher

jQuery.BgSwitcher实现背景图像切换效果。

地址:https://github.com/rewish/jquery-bgswitcher

image.png

9.FullImageReveal

一个完整的图像显示精美的缩略图滑动效果。

地址:https://github.com/codrops/FullImageReveal

image.png

10.MotionTransitionEffect

图像幻灯片的快速运动过渡效果。

地址:https://github.com/codrops/MotionTransitionEffect

1.gif

扫描二维码推送至手机访问。

版权声明:本文由武景涛的博客发布,如需转载请注明出处。

本文链接:http://yizhanhongtu.cn/post/49.html

分享给朋友:

相关文章

windows系统下Composer的安装和使用

windows系统下Composer的安装和使用

Composer 是 PHP 的一个依赖管理工具。它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们。Composer 不是一个包管理器。是的,它涉及 "packages"...

什么是flex布局,它的常用属性有哪些

什么是flex布局,它的常用属性有哪些

什么是flex 布局?flex是 flexible box 的缩写,就是弹性布局的意思。任何一个元素(块元素、行内块元素、行内元素),都可以设置为弹性盒子属性。语法:块元素: display:flex...

CSS度量的单位px、rem、em、vw、vh有什么区别

CSS度量的单位px、rem、em、vw、vh有什么区别

1、px绝对单位,页面按精确像素展示2、em相对长度单位,相对于当前对象内文本的字体尺寸, 根据父元素的大小变化而变化对单位,基准点为父节点字体的大小。em是指字体高度 浏览器默认1em=16px,所...

PHP开发api接口,如何做才算是安全的

PHP开发api接口,如何做才算是安全的

php的api接口在实际工作中,使用PHP写api接口是经常做的,PHP写好接口后,前台就可以通过链接获取接口提供的数据,而返回的数据一般分为两种情况,xml和json,在这个过程中,服务器并不知道,...

MySQL中,21个写SQL语句的好习惯

MySQL中,21个写SQL语句的好习惯

每一个好习惯都是一笔财富,本文分 SQL 后悔药、SQL 性能优化、SQL 规范优雅三个方向,分享写 SQL 的 21 个好习惯。1. 写完 SQL 先 explain 查看执行计划。【SQL 性能优...

thinkphp6资源路由解决同源策略、跨域问题。

thinkphp6资源路由解决同源策略、跨域问题。

一般开发接口资源请求服务端都会遇到跨域请求。在跨域请求的时候,明明设置的是POST请求,却请求的时候报跨域错误,检查http请求头发现不是POST请求,而是发起了OPTIONS请求。路由设置:Rout...