标签归档:HTML5图片

HTML5 背景图片毛玻璃模糊特效

毛玻璃特效其实是对图片的模糊处理,我们经常会在手机app中上拉应用时出现背景图片模糊特效,这就是毛玻璃特效。这次我们要分享一款基于HTML5和CSS3实现的背景图片毛玻璃模糊特效,我们在页面上加载一张清晰图片,然后指定图片范围内生成毛玻璃模糊效果,通过边框阴影的添加,使这种毛玻璃特效更显3D立体效果。

html5-frosted-glass-effect

在线演示源码下载

纯CSS3 3D旋转图片墙动画

这是一款基于纯CSS3的3D旋转图片墙,这款纯CSS3图片动画非常炫酷,一张张图片不断旋转,组合成一个动画片段。当然这款动画是基于CSS3的,因此你需要更优秀的浏览器,另外动画有3D的视觉效果,很有立体的感觉。

pure-css3-3d-image-palyer

在线演示源码下载

HTML5/CSS3实现图片多种滤镜特效

这是一款基于HTML5和CSS3的图片滤镜特效应用,每一张图片应用不同的滤镜效果都会有不一样的视觉特效。另外,你也可以切换图片,特别是应用在相册应用中,你不仅可以浏览不同的图片,而且对同一张图片可以有多种特效。

html5-css3-images-filter

在线演示源码下载

HTML5/CSS3图片左右切换弹性动画

这是一款很有特点的HTML5图片切换动画,点击左右按钮即可将图片进行弹性切换,图片在被切换时,都会产生一定的弹性缓冲动画效果。这款HTML5图片应用非常适合在产品宣传页面上使用,看上起十分大气。

html5-css3-elasticity

在线演示源码下载

HTML5自定义文字背景生成QQ签名档

这是一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版一样覆盖在文字上。点击生成QQ签名档即可将文字背景融为一体生成另外一张图片,你也可以下载这张拥有你QQ签名档的图片。

html5-qq-text-background

在线演示源码下载

HTML5 Canvas生成粒子效果的人物头像

前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单。今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下来该图片会被打散成许多粒子,然后慢慢的重组成图片,鼠标滑过图片时粒子还会出现浮动的动画特效,看上去非常酷。

html5-canvas-pixel-image

在线演示源码下载

HTML5 Canvas图片马赛克模糊动画

经常可以在网上或者电视上看到被马赛克模糊的图片或者视频,今天我们要利用HTML5 Canvas技术来实现图片的马赛克模糊效果。在演示中我们可以拖动滑竿来设置马赛克模糊的程度,你可以在不同的值下观察图片被马赛克后的效果。HTML5的确非常强大。

html5-canvas-image-mosaics

HTML代码如下

<p class="center">Change pixel resolution <input type="range" min="4" max="100" value="32" id="range" /> <span id="output">32</span></p>
<div class="thumb">
	     <img src="img/1.jpg" id="dolly1" />
     	<img src="img/2.jpg" id="dolly2" />
     	<img src="img/3.jpg" id="dolly3" />
</div>

定义了一个滑竿[......]

阅读全文>>

HTML5截图功能 可拖拽图片

截图在我们平常电脑应用中非常的广泛,包括开发者和一般的使用用户。今天介绍的这款HTML5截图应用可以帮助你在上传头像前截取自己的头像,你只需要拖拽移动图片即可选中要截取的部分,HTML5会自动将选取的图片自动生成一张新的图片来保存,从而完成截图的功能。另外,该HTML5截图应用还支持按住shift键实现图片同比例缩放。

html5-screenshot

下面我们来看看实现这款HTML5截图功能应用的过程和源代码,代码主要由HTML、CSS以及jQuery组成。

HTML代码:

<div class="component">

		<div class="overlay">
			<div class="overlay-inner"></div>
		</div>

		<img class="resize-image" src="img/image.jpg" alt="image for resizing">

		<button class="btn-crop js-crop">截图<img c[......]

阅读全文>>

HTML5图片相册重力感应特效

今天我们要来分享一款和HTML5重力感应相关的动画特效,这是一个图片相册,点击按钮即可让排列整齐的图片散落开来。这款HTML5重力感应动画特效可以允许你用鼠标拖拽甩动图片,并且让图片模拟重力感应的效果互相碰撞。

html5-gravity-gallery

在线演示源码下载