作者归档:sxwgf

JavaScript图片拖动对比 实现图片差异定位

有些时候,我们需要快速定位被处理过图片与原始图的差异,这在有限大小的电脑屏幕上是一件很麻烦的事情。这次要给大家介绍一款用纯JavaScript代码编写的图片拖动对比插件,利用它我们可以快速地找出图片的细微差异,我们可以通过滑动图片两边的滑杆,滑动的同时原始图片就随着被处理图片的移动而逐渐显示出来。这个插件没有利用复杂的JS框架,因此代码比较简单。另外之前也分享过一款类似的jQuery插件jQuery原始图片对比插件,大家也可以去学习一下。

javascript-image-differ

在线演示源码下载

纯CSS3实现可爱的小蜜蜂动画

CSS3真的是非常受欢迎,我们可以利用CSS3绘制很多东西。就像这次要介绍的纯CSS3可爱的小蜜蜂动画,我们不仅利用纯CSS3代码绘制了蜜蜂的外形,而且还配备了眨眼和翅膀飞动动画,更让人惊叹的是,眨眼睛的频率模拟得非常真实,大家可以自己去演示页面体会一下。

css3-bee

在线演示源码下载

超炫酷HTML5 Canvas蝴蝶飞舞动画

还记得很早以前我们为大家分享过一款非常炫酷的HTML5蝴蝶3D动画,它是基于HTML5和SVG实现的。这次我们要再一次为大家介绍另外一款同样也很酷的HTML5 Canvas蝴蝶飞舞动画,蝴蝶是在Canvas上绘制而成,利用HTML5的动画特性实现蝴蝶的飞舞,大家可以学习一下。

html5-canvas-butterfly

在线演示源码下载

纯CSS3绘制的宝剑 可上下浮动

这是一款利用纯CSS3代码绘制的宝剑动画,整一把剑从剑柄刀剑梢都是用CSS3的相关属性实现的,其实绘制剑的轮廓还是比较简单的,比较有意思的是,这把剑还会慢慢地上下浮动,让这把剑更显得活灵活现,非常逼真。

css3-sword

在线演示源码下载

CSS3 3D立体柱状图表演示动画

之前我们给大家分享过很多基于jQuery和HTML5的图表插件,有线型图、柱形图、饼状图等,外观也是各种各样,比如这10个经典实用的HTML5图表动画应用。这次我们依然要分享一款炫酷的3D立体柱状图表,它是完全基于CSS3实现的,它的特点是根据数据动态生成一个柱状图,并实现3D播放演示。

css3-3d-bar-chart-animation

在线演示源码下载

纯CSS3实现垂直手风琴菜单

今天我们要给大家介绍一款简单实用的CSS3垂直手风琴下拉菜单,这款纯CSS3实现的手风琴菜单,部署的CSS代码非常简单,但是已经可以实现手风琴菜单的所有基本功能,包括菜单项的展开收拢、菜单项小按钮的切换等,是一款相当实用的CSS3手风琴菜单插件。

css3-vertical-accordion-menu

在线演示源码下载

最全面的CSS3鼠标滑过动画按钮集锦

随着现代CSS3和HTML5技术的不断发展,我们经常可以在网页上看到各种各样鼠标滑过按钮的动画,简单的鼠标滑过按钮时背景颜色的改变,复杂的鼠标滑过按钮时产生炫酷的动画。今天我们要介绍一组最全面的CSS3鼠标滑过动画按钮,包含按钮边框变换动画、按钮背景发光动画等等,都非常实用。

css3-hover-buttons

在线演示源码下载

又来一波 15个超炫酷的CSS3加载Loading动画图标

之前我们分享过好几波炫酷实用的CSS3Loading加载动画图标,外观设计和动画效果都非常具有创意。比如纯CSS3 Loading加载动画 多组超炫酷风格10款造型奇特的CSS3进度条/Loading动画。今天我们又要向大家分享一组炫酷的CSS3加载Loading动画图标,它们共同的特点就是都很个性化。

15-css3-loading-icon

在线演示源码下载

CSS3可展开收缩的弹性动画菜单

这次我们要为大家分享一款炫酷实用的CSS3菜单,这款菜单的特点是可以展开和收缩菜单项,并且在展开和收缩的过程中伴随弹性的动画特效,而且展开和收缩的按钮也会出现一些炫酷的动画特效。这款CSS3弹性动画菜单比较适合个性化的个人博客中使用。

css3-elasticity-menu

在线演示源码下载

超富创意的纯CSS3圆形数字时钟插件

这是一个超有创意的CSS3数字时钟应用,这款应用插件的特点是它的时钟外观非常新颖,是一个圆形的数字时钟动画。时分秒分别落在3个圆圈上,时间每走一秒,圆圈会相应旋转。另外我们之前也分享过一些富有创意的时钟,比如这款jQuery/CSS3线性时钟插件也非常不错。

css3-circle-digital-clock

在线演示源码下载