标签归档:HTML5焦点图

HTML5 多维度3D图片切换动画

今天我们要给大家分享一款非常特别的HTML5/CSS3焦点图插件,这款焦点图插件可以实现XY两个维度的图片切换动画,并且图片在排列时有一种3D立体的视觉效果,这样的效果正是使用了CSS3特殊属性改变了图片4条边的倾斜角度。

html5-3d-mult-axis-images

在线演示源码下载

HTML5/CSS3 3D图片播放器 可360度旋转图片

记得之前给大家分享过一些超炫酷基于jQuery和HTML5 的3D焦点图图片播放器,很多还是不错的,比如jQuery 3D 垂直螺旋切换焦点图动画超赞实用的jQuery立体3D焦点图插件。今天要分享的是另外一款基于HTML5和CSS3 3D图片播放器,它的特点是图片呈3D样式,而且可以通过滑杆360旋转图片,效果非常炫酷。

html5-css3-3d-rotate-image

在线演示源码下载

HTML5波浪形切换焦点图动画

之前我们分享过很多基于jQuery和HTML5的焦点图动画插件,比如这款jQuery带缩略图焦点图插件HTML5/CSS3立方体翻转3D全屏焦点图都非常炫酷和实用。今天要分享的同样是一款基于HTML5的焦点图动画,它的特点是图片切换时使用波浪形切换方式,非常不错。

html5-wave-image-player

在线演示源码下载

HTML5 SVG个性化切换按钮焦点图动画

这是一款很特别的焦点图动画,它的特点在于其左右切换按钮上,不像其他焦点图插件的切换按钮仅仅是两个左右箭头,它的切换按钮是前一张图片和后一张图片的缩略图,并且缩略图可以定义不同的路径形状,当然这些路径形状是由SVG提供。

html5-svg-path-image-slider

在线演示源码下载

HTML5/CSS3 3D焦点图 支持鼠标滚轮

记得以前给大家分享过一款很酷HTML5 3D相册,不知道你有没有研究过源码。今天我再向大家分享一款基于HTML5和CSS3的焦点图相册,在浏览图片时,没激活的图片并不是完全隐藏,而是以3D半透明的方式陈列在主图旁边。值得注意的是,这款HTML5 3D焦点图支持鼠标滚轮来切换图片。

html5-css3-carousel

在线演示源码下载

HTML5/CSS3立方体翻转3D全屏焦点图

今天我们要来分享一款非常大气的HTML5/CSS3 3D全屏焦点图,在页面两侧,有两个很立体的左右箭头进行图片切换。这款HTML5焦点图的图片切换方式是3D效果的,类似立方体翻转一样,焦点图默认显示文字,我们已经将文字替换成图片,效果更酷。

html5-3d-cube-image-player

在线演示源码下载