分类目录归档:HTML5应用

React.js扭曲相册焦点图动画

今天给大家分享一款基于React.js的相册画廊,它同时也是一个不错的焦点图播放动画插件。这款焦点图插件的特点是图片以淡入淡出和扭曲的动画方式切换,虽然并没有华丽的动画效果,但是简单明了,又不乏创意,非常不错。另外一个特点是,这款焦点图可以适应不同的屏幕尺寸,在手机上也同样可以有不错的使用体验。

react-js-image-slider

在线演示源码下载

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

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

css-admin-menu

在线演示源码下载

HTML5国际象棋AI版

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

html5-ai-chess

在线演示源码下载

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

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

html5-christmas-cannon

在线演示源码下载

SVG超酷动画Tab菜单栏

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

svg-animated-tab-menu

在线演示源码下载

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

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

html5-canvas-ruler

在线演示源码下载

3D质感CSS3按钮 按钮内容支持SVG

记得很早以前,我们给大家分享过一款酷似牛奶般剔透的CSS3 3D按钮,动画效果非常不错。今天我们要分享的同样是一款基于CSS3的3D按钮,尽管这个按钮的视觉效果没有之前那么震撼,但是很实用,特别是它支持按钮内容为任意的SVG,你甚至可以用SVG来制作一段小动画来作为按钮的背景。

css3-3d-svg-button

在线演示源码下载

HTML5 Canvas粒子螺旋线条3D动画

今天给大家带来一款效果很酷的HTML5 Canvas动画,它由几个基本动画组成,一个是粒子动画,另一个是螺旋动画。首先是在canvas画板上将像素粒子组合成一个螺旋形线条,然后用JavaScript让粒子运动起来,在视觉上形成螺旋线条波动的动画特效。

html5-canvas-spiral

在线演示源码下载

CSS3卡通电子琴动画特效

记得在很早以前,我们给大家分享过一个HTML5 SVG圆形钢琴动画,可以弹奏出美妙的琴音。今天给大家分享一个纯CSS3制作的卡通电子琴动画特效,它只是用CSS3绘制的电子琴外观,并不能弹出美妙的音乐,但是它由纯CSS3实现,因此可以当gif动画来展示。

css3-cartoon-piano

在线演示源码下载

CSS3社交平台分享按钮 鼠标悬停背景变化动画

之前我们分享过一些漂亮和实用的分享按钮,很多都是比较传统的按钮,但结合CSS3使得按钮变得丰富多彩,比如这个又一波CSS3社会化分享图标 可旋转和悬停。也有一些在外观上非常富有创意,比如这个jQuery交互式分享按钮 可横向展开。今天我们再给大家分享一个基于CSS3的社交平台分享按钮,鼠标悬停在按钮上时可以产生变化的背景动画。

css3-share-button-background

在线演示源码下载