标签归档:图片特效

CSS3鼠标滑过图片覆盖渐变颜色蒙版

今天我们要介绍一款比较实用的CSS3图片特效,它并没有非常华丽的动画效果,但是很多场合都可以用到。当我们将鼠标滑过图片时,图片上方会覆盖一层渐变颜色的蒙版,移开图片蒙版又会以渐变的方式消失,同时这层蒙版由于颜色动态渐变,因此给人一种发光的视觉效果。

css3-image-gradient-hover

在线演示源码下载

10几种实用的CSS3鼠标滑过图片动画特效

这是一款非常实用的CSS3图片应用特效,当我们将鼠标滑过图片时,图片就会产生10几种不同的动画特效,比如产生内阴影、外投影、图片旋转翻转等不同的效果。这些都是利用了CSS3的动画属性完成,实现起来非常方便,它可以让网页中的图片变得更加生动炫酷。

css3-image-hover-animation

在线演示源码下载

SVG图片波浪效果渲染动画

今天我们要为大家分享一款很酷的SVG图片动画,主要是图片上会出现波浪的渲染动画。实现原理是在图片上方利用SVG路径绘制了一层蒙板,然后蒙版进行一定的随机扭曲就形成了图片上方波浪翻滚的动画特效,而且也十分逼真。

svg-image-wave-effect

在线演示源码下载

jQuery/CSS3图片翻转特效 可水平垂直翻转

这是一款基于jQuery和CSS3的图片翻转特效,每一张图片都有文字标题悬浮在图片上,点击切换按钮,每一张图片均会进行水平或者垂直翻转,翻转效果非常酷,有3D立体的视觉效果。CSS3的运用让这些图片都显得十分精神。

jquery-css3-image-rotate

在线演示源码下载

jQuery图片左右水平滚动插件

这次我们再来分享一款jQuery图片插件,首先你可以自己定义图片的总数已经分组的数量,插件会帮助你将图片按指定的分组切分图片,你可以点击左右切换按钮来按分组切换图片,利用jQuery,图片可以非常流畅地进行左右水平滚动插件。

jquery-image-lr-scroll

在线演示源码下载

HTML5 3D相册图片轮播动画

这是一款基于HTML5和CSS3的3D相册浏览插件,它可以将相册中的图片以3D的方式展示出来,并且你可以滑动下面的滑杆来滑动图片浏览,同时,我们也可以指定数字让其直接跳转到指定的图片。这款HTML5 3D图片轮播动画用起来非常棒。

html5-3d-gallery-animation

在线演示源码下载

jQuery/CSS3相册浏览插件 相册图片滤镜效果

这是一款基于jQuery和CSS3的超酷相册浏览插件,当我们滑过相册图片的缩略图时,图片即会产生滤镜效果,由灰色编程彩色,同时图片周围产生不错的阴影效果。点击缩略图时,我们将开始浏览相册的原始图片,我们点击右上角的关闭按钮即可回到相册缩略图模式。

jquery-css3-simple-gallery

在线演示源码下载

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

在线演示源码下载

jQuery实现马赛克图片拼接翻转动画

之前我们分享过很多炫酷的jQuery图片特效,有空大家可以看看。今天我们要再来分享一款基于jQuery的图片特效,它的效果是图片马赛克翻转动画,并且将这些马赛克块状图片拼接起来组成一张完整的图片,翻转动画非常的酷。

jquery-image-masaike-roll

在线演示源码下载