标签归档：HTML5图片

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

11,412 人浏览

2019-11-26 18:55:43

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

在线演示源码下载

纯CSS3 3D旋转图片墙动画

9,240 人浏览

1条回复

2015-12-13 21:18:17

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

pure-css3-3d-image-palyer

在线演示源码下载

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

11,907 人浏览

1条回复

2015-12-06 07:00:06

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

html5-css3-images-filter

在线演示源码下载

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

134,632 人浏览

发表回复

2015-07-18 10:27:28

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

html5-css3-elasticity

在线演示源码下载

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

13,028 人浏览

2条回复

2015-03-02 21:58:19

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

html5-qq-text-background

在线演示源码下载

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

21,689 人浏览

3条回复

2015-02-05 15:10:37

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

在线演示源码下载

HTML5 Canvas图片马赛克模糊动画

20,324 人浏览

1条回复

2015-02-04 22:24:57

经常可以在网上或者电视上看到被马赛克模糊的图片或者视频，今天我们要利用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/CSS3实现图片倒影3D效果

15,145 人浏览

发表回复

2015-01-07 19:53:13

这是一款基于HTML5的图片倒影特效，同时它主要利用了CSS3的倾斜属性，通过这样的渲染，让图片整体看上去很富有立体感，图片的倒影看上去也非常逼真，是一款比较实用的HTML5图片应用。

html5-css3-image-shadow

在线演示源码下载

HTML5截图功能可拖拽图片

44,596 人浏览

2条回复

2014-11-20 11:30:51

截图在我们平常电脑应用中非常的广泛，包括开发者和一般的使用用户。今天介绍的这款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[......]

阅读全文>>