纯JavaScript实现简洁的颜色选取器

之前我们分享过几款基于jQuery和CSS3的颜色选取插件,比如这款jQuery实现的一个颜色选择器,可以实时输出RGB值,在比如这款HTML5 CSS3颜色选取并复制十六进制值,他们的特点是都可以将颜色转换成数值。今天介绍的这款就比较简单,它是基于纯JavaScript的,并没有采用庞大的框架,因此颜色选取器非常简洁,使用也十分方便。

javascript-color-picker

在线演示源码下载

CSS3 水墨风格背景动画按钮

今天给大家分享一个非常有特色的CSS3动画按钮,之前分享的很多按钮都是通过CSS3特性实现的3D视觉效果,比如这款超酷的CSS3复古风格和字体的3D按钮。这款按钮不同,它主要是鼠标滑过按钮后渲染出水墨风格的背景动画,尽管是平面样式,但是比较简单实用,也有一种扁平化的效果。

css3-ink-button

在线演示源码下载

CSS3 SVG实现带表情的投票打分插件

记得很早的时候给大家分享过一些简单实用的投票插件,大部分都是基于jQuery的,比如这款jQuery评论打分插件 支持多种打分按钮。今天要介绍的这款投票打分插件是基于CSS3和SVG的,它的特点是对于不同的评级会有不同的表情,比如1星是失落的表情,5分是帅酷的表情。

css3-svg-vote

在线演示源码下载

HTML5 Canvas 3D环形方块翻转动画

之前我们有给大家分享过一系列的HTML5 3D立方体动画,有很多效果都还不错的,比如这个HTML5/CSS3 3D魔方动画就很厉害,这应该是方块效果中最复杂的了。今天给大家带来的这款方块动画是基于HTML5 Canvas的,它的特点是许多个方块围成一个环形,每个方块不停地旋转,同时你也可以拖拽鼠标来看环形方块的不同视角。

html5-canvas-3d-circle-cube

在线演示源码下载

CSS3软件卸载对话框 根据是否卸载出现不同表情

之前我们分享过很多各式各样的对话框插件,有的基于jQuery,有的则是应用了大量的CSS3特性,让对话框的外观和交互行为变得更加不错。例如多动画对话框窗口插件就非常好看和实用。今天我们要分享另外一个对话框插件,它主要用来卸载软件时的提示,特点在于,当用户选择保留和卸载后,对话框中间的表情会根据用户选择发生动态变化,非常可爱。

css3-uninstall-dialog

在线演示源码下载

纯CSS3花瓣样式的Loading加载动画

之前我们分享过很多基于纯CSS3的Loading加载动画,有的是Loading动画小图标,有的是进度条动画,这些在延迟加载的页面和复杂耗时操作上非常实用。这次我们要分享另外一款富有创意的纯CSS3花瓣样式的Loading加载动画,它的外观是一个花瓣形状的小图标,页面加载时花瓣小图标会不停旋转,并且在花瓣下方显示一个进度条。

css3-flower-loading

在线演示源码下载

HTML5骏马奔跑动画

今天给大家分享一个非常新颖的HTML5动画,它是一匹骏马,在疾风中飞驰。马的外观是在Canvas上绘制而成,同时骏马在奔跑的时候从地面上飞溅上来很多泥土,这让骏马奔跑的效果更加逼真,这个动画可以改进的地方是可以利用CSS3将骏马的面部、身体等部位描述的更加具体一点,比如添加眼睛、马鞍之类的元素。

html5-horse-animation

在线演示源码下载

HTML5 CSS3颜色选取并复制十六进制值

之前我们分享过很多基于jQuery和HTML5的颜色拾取器,都可以在调色板上选取不同的颜色,比如这个jQuery实现的一个颜色选择器功能就比较强大,可以拾取任意颜色。这次我们分享的这款颜色选取应用是基于HTML5和CSS3的,它的特点是可以选择某一色系中的几种常用颜色,并且可以将对应颜色的十六进制值复制出来。

html5-css3-color-copy

在线演示源码下载

HTML5 Canvas烟花绽放庆祝活动场景

前段时间,我们分享过几个基于HTML5 Canvas的烟花动画,例如这个2D平面的烟花动画,也是基于HTML5 Canvas的;同样的另外一个基于3D带音效的烟花燃放动画效果也非常炫酷。这次我们分享的另外一款基于HTML5 Canvas的烟花绽放动画的特点是,除了可以播放烟花动画,而且还可以用粒子动画的方式显示文本,例如公司名字,这样更是渲染了庆祝的氛围。

html5-canvas-fireworks-celebrate

在线演示源码下载

VueJS表头固定的数据表格 可按每列排序

在网页中,表格(table)大部分用于数据的展示和处理,在jQuery的时代,用于表格的插件非常多。今天我们介绍一个基于VueJS的表格应用,它的特点是表格表头固定,也就是说当表格数据行很多时,页面下拉时表头可以固定,方便查看每一列的数据。另外还有特点是我们可以对每一个列进行排序。同时,这款JS表格的外观也不错,可以很好用到你的项目中。VueJS还是挺灵活的。

js-sticky-sort-table

在线演示源码下载