标签归档:CSS3图片

CSS3响应式瀑布流图片展示 带倾斜滤镜特效

现在的网站应用被越来越多的移动设备访问,以前网页中的图片通常采用表格的形式展现,但是这不能满足图片尺寸不一致的情况。今天介绍一款基于CSS3的响应式瀑布流图片展示框架,它的特点是可以在电脑端和手机端良好的展示,而且图片还带有倾斜和滤镜的特效。

css3-waterfalls-image-flow

在线演示源码下载

CSS3鼠标滑过图片效果 用Font Awesome库实现悬停图标

今天给大家带来一个比较传统但却非常实用的CSS3应用,它的功能是可以快速生成一个带鼠标滑过特效的图片,当鼠标滑过图片时,图片上方将会打开遮罩层,浮现自定义的标题等文本,也可以采用Font Awesome网页图标库实现各种功能按钮。另外它还有一个特点是可以生成多张这种效果的图片,并实现相应式布局,随着页面大小的调整改变最佳的图片排列方式。

css3-fontawesome-image-hover

在线演示源码下载

CSS3鼠标滑过购物车图片切换 可分享和搜索

今天给大家分享一款很实用的CSS3购物车图片插件,它的功能是当你将鼠标滑过购物车图片时,图片会切换成另外一张图片,同时在图片上方产生一层带操作按钮的遮罩层,你可以定义分享、比较和搜索等操作,你也可以自己添加删除小按钮。

css3-image-hover-share

在线演示源码下载

HTML5/CSS3超链接图片弹出动画

今天给大家分享一个基于HTML5和CSS3的超链接动画,这个HTML5应用还是比较实用的,它可以让你在鼠标滑过超链接时弹出图片,就像弹出tooltip那样的动画效果。因为用上了一些CSS3的动画属性,所以这个超链接图片弹出动画有很多种,你也可以自己尝试定义一些新的动画效果。

html5-canvas-link-image

在线演示源码下载

JS/CSS3实现的3D波浪效果图片切换动画

我们分享过很多基于jQuery和CSS3的图片切换插件,很多都非常实用,也有很多效果炫酷的基于CSS3的图片切换。今天我们给大家分享一款基于JavaScript和CSS3的3D波浪效果图片切换动画,图片在切换时,就像波浪翻转一样,呈现出3D立体的切换动画特效。

js-css3-3d-wave-image

在线演示源码下载

CSS3 3D图片层叠切换动画

今天给大家分享一个很不错的CSS3 3D样式的图片层叠切换动画,当鼠标滑过图片后,该图片会被旋转至当前窗口突出显示,其他图片则藏在它的后面,呈现3D立体的视觉效果。更重要的是,鼠标滑过时图片切换十分流畅,用户体验比较不错。

css3-3d-image-switch

在线演示源码下载

JavaScript和CSS3色彩对比度可视化实现

如果你使用过类似PS的图形处理软件,应该不会对色彩对比度感到陌生,对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量。今天我们用JavaScript和CSS3来实现色彩对比度。首先载入两幅相同的图片,然后通过一个水平滑杆来改变其中一幅图片的色彩对比度。这个应用的特点是可以改变图片初始的色彩。类似的jQuery图片对比应用大家还可以看看这款jQuery原始图片对比插件JavaScript图片拖动对比 实现图片差异定位

javascript-css3-color-contrast

在线演示源码下载

CSS3图片层叠弹性动画

之前我们分享过很多非常炫酷的CSS3和HTML5图片层叠切换动画,比如CSS3/jQuery实现移动端滑动图片层叠效果jQuery多张图片上下叠加切换插件。今天我们要分享的是一款基于CSS3的图片层叠弹性动画,当我们将鼠标滑过图片时,图片就会展示层叠的视觉效果,并且会以弹性的动画方式放大图片,效果非常不错。

css3-image-stack-elasticity

在线演示源码下载

宽屏大气的CSS3百叶窗动画图片播放器

今天我们要来分享一款基于CSS3的图片播放器,它的图片切换动画是垂直的百叶窗方式,并且在百叶窗动画播放时,图片会出现淡入淡出的效果,整体非常立体。和其他图片播放器类似,这款应用也提供左右切换按钮以及图片下方的快速切换按钮。

css3-blind-image-player

在线演示源码下载

超炫酷CSS3图片动画 悬浮+翻转+缩放

这是一组基于CSS3的图片动画,这组图片动画包含图片上悬浮文字、图片上下左右翻转以及图片缩放这3中动画特效。第一组动画中当我们将鼠标滑过图片时,图片上方就会显示文字层,文字层的出现也会伴随一定的动画效果,后面的图片翻转和图片缩放效果也非常不错,而且很实用。

css3-image-float-reversal

在线演示源码下载