作者归档:sxwgf

3组不同风格的CSS3后台管理系统菜单

这是一款基于Tailwind CSS3的后台管理系统菜单,提供3组漂亮的风格主题,非常适合为网站或者App的后台系统提供主菜单导航。这款CSS菜单结构是垂直的,提供“仅图标”和“图标文本”两种模式,所以我们可以为菜单设计一个响应式的方案,选择性地使用菜单显示模式。菜单的3组风格主题明暗区分,肯定可以适配应用的总体风格,非常不错。

css-admin-menu

在线演示源码下载

HTML5国际象棋AI版

之前我们介绍过基于HTML5中国象棋五子棋,它们都可以实现人机对战,而且“机器智商”都还算可以。这次我们要给大家带来一个基于HTML5的国际象棋,它也提供人机对战,不过智商相对较低,我们称它为“Cheap AI”,像我一个国际象棋初级入门的人都可以轻轻松松赢得比赛。如果你对人工智能感兴趣,你也可以改造这款国际象棋的机器智商,让它变得更为强大。

html5-ai-chess

在线演示源码下载

Vue.js折线图表插件 支持数据分组统计

这是一个基于vue.js的折线图表插件,它拥有折线图应该有的全部功能,包括数据更新、数据分组统计以及图表自适应等功能,使用起来十分方便。在插件使用方面,我们只需要在配置选项中设置x轴和y轴的数据范围定义,以及各自的单位。然后再定义每组数据,vue会帮你完成后续的图表生成,以及生成后的简单交互功能,应该说是非常实用了。

vue-js-bar-chart

在线演示源码下载

Vue.js实现的3D Tab菜单

今天给大家带来一款基于VueJS的3D Tab菜单,它跟我们之前分享的许多CSS3 Tab菜单不同的是,它可以随着鼠标移动呈现出3D立体的视觉效果,每个tab页面还可以通过CSS自定义封面照片。它的核心是基于vue和bootstrap实现,因此扩展起来非常方便,你可以任意添加或者减少tab页面数量,同时只要更新对应tab页面的CSS代码即可,无须修改js代码。

vuejs-3d-tab-menu

在线演示源码下载

HTML5圣诞礼物大炮发射3D动画

今天给大家带来一款基于HTML5的圣诞礼物大炮发射动画,这个动画主要是构造了一个3D的卧室场景,我们通过点击鼠标让一门大炮可以源源不断地发射各种各样的圣诞礼物,并且伴随大炮发射的声音,显得非常逼真有趣。这个HTML5动画主要算法是一些物体的碰撞检测,以及物体碰撞时的运动方向计算,对开发者的数学功底要求还是比较高的,有兴趣的朋友可以学习一些动画的JS代码。

html5-christmas-cannon

在线演示源码下载

SVG超酷动画Tab菜单栏

这是一款基于SVG和CSS3的动画Tab菜单插件,菜单图标使用SVG绘制而成,菜单切换时还会产生不错的动画效果。菜单项小图标使用svg的好处,不仅在于灵活绘制,更方便制作菜单项切换时图标的动画特效。另外,Tab菜单项切换时,还同时会渐变地更新页面的背景颜色,当然如果你觉得太花里胡哨不需要这个效果,可以自行修改js代码取消背景颜色的渐变切换。

svg-animated-tab-menu

在线演示源码下载

Vue.js流程图插件 可自定义流程节点事件

今天给大家带来一款基于VueJS的流程图插件,我们可以用这个插件来定义一些对象的生命周期、项目工作的流程等等,非常方便。这个实例中,我们用这个插件定义了一个vue对象的生命周期,这也可以让你大致了解vue框架的工作过程。每一个流程节点也都可以定义前后节点之间的事件触发规则,同时也可以统计事件触发的次数。你也可以自己来尝试一下,用这个vue流程图插件来定义一个流程。

vue-js-flow-chart

在线演示源码下载

Vue.js任务列表 可本地存储任务数据

今天给大家带来一款基于vue.js的任务列表插件,也就是我们常说的todo list。我们可以在输入框中输入任务名称,点击“add”按钮后就可以将任务添加到任务列表,并且通过点击任务名称改变任务完成状态。同时你也可以删除任务。你还可以按照任务状态进行筛选,方便查询和统计。这个vue任务列表插件还有一个特点就是,通过编辑的这些任务支持本地存储,也就是说任务并不会随着浏览器的关闭而丢失。

vue-js-todo-list

在线演示源码下载

Vue.js 圆形CSS3渐变色拾取器

这是一个非常实用的颜色编辑拾取工具,它基于vue框架实现,可以很好的生成CSS3中常用的渐变色代码。我们在CSS3代码中经常会用到一些颜色渐变的特效,但是大部分人都对颜色代码值非常不敏感,尤其是渐变色的颜色值。这款vue圆形CSS3渐变色拾取器用一种可视化的方式帮助开发者生成渐变色的代码值,使用非常方便。

vue-gradient-editor

在线演示源码下载

HTML5 Canvas 刻度尺插件 可定制多种主题样式

今天给大家带来一款基于HTML5 Canvas的刻度尺动画,我们可以通过在屏幕上滑动刻度尺来改变刻度值,你也可以通过设置初始值来决定是否在移动刻度尺时显示当前刻度值。这款插件还有一个特点是可以通过配置来设置刻度尺的多种主题样式。

html5-canvas-ruler

在线演示源码下载