3D版HTML5模拟衣服撕扯动画

还记得很早以前向大家分享的这款HTML5 Canvas模拟衣服撕扯动画吗?这绝对是一款非常具有创意而且很好玩的HTML5动画。今天我们来分享一下它的3D版本,在原来的基础上,衣服布料呈3D环形显示,你同样可以用鼠标拖拽衣服,不过和之前不同的是,鼠标左键用来拖拽衣服,鼠标右键用来切割衣服,失去了之前鼠标用力程度和衣服破碎程度的关系,似乎功能上有所缺失,但是HTML5 3D功能还是不错的。

3d-html5-cloth-tear

下面我们来简单分享一下实现的源码,代码主要由HTML和JavaScript组成,主要还是JavaScript。

HTML代码:

<canvas width="800" height="800" id="c"></canvas>

只是定义了一个canvas标签,非常简单。

JavaScript代码:

canvas = document.getElementById('c');
ctx    = canvas.getContext('2d');

//settings
var physics_acc   = 5,
    tear_distance[......]

阅读全文>>

jQuery手风琴式相册图片展开效果

之前我们有分享过很多jQuery手风琴样式的菜单,比如CSS3手风琴下拉菜单。今天要分享的jQuery手风琴效果很特别,它是手风琴样式的相册图片展开效果。我们只需点击图片缩略图即可展开当前的图片,并将其他的图片收缩起来。

jquery-accordion-image

在线演示源码下载

jQuery带暂停按钮的焦点图插件

今天我们要来分享一款jQuery焦点图插件,该焦点图不仅带有Tooltip文字提示和时间轴,而且还带有暂停播放按钮,我们可以更好地控制图片播放进度和顺序。这款jQuery焦点图不仅可以自动播放图片,还可以点击时间轴上的按钮来切换图片。

jquery-image-player-pause-button

在线演示源码下载

CSS Sprites实现图片分组动画效果

什么是CSS Sprites?CSS Sprites就是可以将许多图片集成在一张大图上,然后利用CSS的图片定位技术将其分割开来。这款CSS3图片效果就是可以将分割完的小图片实现分组的动画效果,我们只需要点击按钮即可切换到相应的分组状态,并伴随动画的效果。

css-sprites-image-group

在线演示源码下载

CSS3立体3D菜单 蓝色淡雅风格菜单

今天我们要来分享一款基于CSS3的3D菜单,这款菜单式蓝色淡雅风格的,鼠标滑过菜单项时还会有淡入淡出的颜色渐变效果。菜单的整体外观比较简单,边框呈现淡淡的阴影,因此让这款CSS3菜单变得有3D立体的效果。

css3-blue-3d-menu

在线演示源码下载

纯CSS3实现超酷的磁带动画

记得之前分享过一款HTML5磁带式古典播放器,效果相当震撼。这次我们要用纯CSS3来实现一个超酷的磁带动画特效。首先用纯CSS3绘制了一个磁带的外观,还是相当逼真的,然后用CSS3的动画属性实现了磁带的旋转,就像在播放歌曲一样,如果配合HTML5的音频播放功能,就和那个磁带播放器差不多了。

css3-cassette-tape

在线演示源码下载

HTML5仿Apple Watch时钟动画

Apple Watch刚刚发布不久,就已经有国外的大牛将其时钟表盘界面用HTML5模仿出来了,并且这款HTML5仿Apple Watch的时钟是动态的,可以根据本地时间实时更新指针数据。时钟的界面非常华丽,确实有苹果的风格,HTML5也的确非常强大。

html5-apple-watch

在线演示源码下载

纯CSS3和SVG鼠标滑过灯泡发光特效

这次要分享一款利用纯CSS3和SVG实现的灯泡发光效果,我们只需要将鼠标滑过灯泡,整个灯泡就会出现发光发亮的动画特效,效果相当逼真。CSS3的运用,让灯泡外围有一层淡淡的光晕。并且在灯光点亮和熄灭的时候有淡入淡出的效果。

pure-css3-svg-shine-effect

在线演示源码下载

jQuery 3D圆盘旋转焦点图 支持鼠标滚轮

之前我们分享过很多炫酷实用的jQuery焦点图插件了,今天介绍的这款jQuery焦点图非常特别,所有图片围成一个圆圈,组成一个立体视觉的圆盘,并且可以旋转选择圆盘中的图片。另外,这款jQuery 3D圆盘旋转焦点图插件还支持鼠标滚轮,可以让你更方便地浏览图片。

jquery-3d-circle-image-slider

接下来分析一下实现这款jQuery 3D焦点图的具体过程和源代码,代码主要由HTML、CSS以及jQuery组成,由于JS的参与,相对比较复杂。

HTML代码:

<ul id="carousel">
			<li>
				<img src="images/image1.jpg" alt=""/>
				<div>Image description</div>
			</li>
			<li>
				<img src="images/image2.jpg" alt=""/>
			</li>
			<li>
				<img src="images/image3.j[......]

阅读全文>>

CSS3灰色按钮组合 3D效果按钮

今天我们要来分享一款很富有3D立体视觉效果的CSS3按钮组合,类似这样的CSS3按钮我们还可以看这款CSS3灰色按钮菜单 超具3D立体感,效果也非常不错。今天的这款按钮组合可以有大尺寸和小尺寸按钮,鼠标滑过按钮时就会改变按钮的背景色,让其有发光的立体效果。

css3-3d-grey-button

在线演示源码下载