分类目录归档:HTML5应用

HTML5 3D无限循环图片流

这是一款基于HTML5的3D无限循环图片流,它模拟了以前Mac Dock菜单栏的设计方式,每一张图片都有倒影,因此给人一种3D立体的视觉效果。另外,我们不仅可以通过鼠标拖拽来滚动切换图片,而且可以通过鼠标滚轮来切换。拖拽可以控制滚动的速度,而且这个图片流是可以无限循环的,不管有多少图片,都可以加入到这个图片流中进行展示。

html5-3d-infinite-flow

在线演示源码下载

HTML5 3D 视差相册画廊

这是一个基于HTML5和CSS3的3D视差相册画廊,画廊中的图片围成一个圆环,拖拽鼠标可以让图片在环形画廊中滚动切换,并且将鼠标滑过图片时,图片也会产生高亮效果,形成一种3D的视差效果。另外,我们可以在次基础上稍微扩展一下,有兴趣的同学可以自己改造一下,就是鼠标点击图片时,可以展开原图,这样我们就可以浏览图片的具体细节了。

html5-3d-parallax-photos

在线演示源码下载

HTML5 Canvas 照片撕裂切换动画

这是一个很有意思的HTML5 Canvas图片切换动画,我们可以用鼠标或者手指在屏幕上滑动,将照片撕成两半,然后再切换成另外一张新的照片。这个特效不足的地方在于,所有照片的撕裂裂纹都是一样的,这可能会显得不是那么逼真。如果你有一个相册应用,个人认为可以将这个效果添加到你的相册照片删除功能上,看到哪张照片不爽,直接将它撕成两半,是不是很过瘾。(注:该动画本地无法运行,需要上传到服务器才可以使用)

html5-canvas-photo-tear

在线演示源码下载

HTML5 Canvas人群流动模拟动画

这是一个基于HTML5 Canvas的动画特效,这个动画主要是模拟了大街上人群流动、熙熙攘攘的景象。首先每一个人物都是在Canvas上绘制而成,大街上男女老少都有,十分逼真。同时,为了让动画更加真实,每个人物的行走速度、行走动作都有一定的差异,这让整个HTML5动画显得更为真实,我们也不得不叹服,Canvas真是一个好东西。

html5-canvas-crowd

在线演示源码下载

基于 TweenMax.js 的图片碎裂切换动画

这次要分享的是一个基于TweenMax动画库的图片碎裂切换动画,当我们点击图片时,图片就会像玻璃那样碎裂成许多块,然后渐渐地消失,直到下一张图片显示为止。TweenMax是高性能JavaScript动画框架,利用它我们可以轻松实现很多炫酷的网页动画效果。这款图片碎裂动画也可以应用在焦点图的切换动画中,效果非常不错。

tweenmax-shattering-image

在线演示源码下载

一套精美的 CSS3 新拟物风格 UI 元素

这是一套基于CSS3和HTML5的新拟物风格UI设计元素,大部分以表单元素为主,例如单选/复选框、按钮、Tab菜单、搜索框,另外还有时钟等。什么是新拟物化?它是一种在扁平的基础上呈现真实物体质感的设计风格。目前这种风格在网页上不多用,但在App上却已经广泛使用,特别是从2020年开始风靡。确实这种带质感的UI元素特别能让用户感到亲切。

css3-neumorphic-elements

在线演示源码下载

HTML5 3D 陨石火球动画

今天要分享的又是一个基于HTML5 Canvas的炫酷动画,这是一个3D的陨石火球动画。从外观上看,这就像一颗正在坠落的陨石火球,还拖着一条长长的火焰尾巴。同时,我们可以通过拖拽鼠标从不同的视角来看这颗火球,并且可以通过鼠标滚轮来放大缩小火球,这便让人产生了不错的3D视觉效果。另外,右上角可以展开一个控制面板,允许你设置火球的颜色、大小、阴影等参数。

html5-canvas-toon-fireball

在线演示源码下载

可切换的精美CSS3登录注册表单

这是一个比较实用的CSS3登录注册表单插件,它可以允许用户在同一页完成注册或者登录操作,只要点击登录或者注册按钮即可以快速切换到相应的页面。另外这款CSS3登录注册表单背景非常特别,表单内部的背景和网页整体的背景,在功能切换时显得非常贴切,而且还有3D立体的视觉效果。大家可以修改注册登录表单项即可为自己的项目定义一个不错的登录注册功能页面。

css3-login-reg-form

在线演示源码下载

基于 D3.js 的 SVG化学元素周期表动画

这是一个使用SVG和基于D3.js脚本库实现的化学元素周期表动画,这张表中列出了所有的化学元素简称及其分子量大小,并按分子量大小和元素类型排序。这张元素周期表和你在中学化学学到的相比,元素列的更为全面,并且他的特点是按照元素的状态,使用不同的颜色或者动画区分出来,比如气态元素会有气体流动动画,十分形象。

html5-svg-periodic-table

在线演示源码下载

纯CSS3 3D乒乓球比赛动画

这是一个使用CSS3实现的3D乒乓球比赛动画,场面效果令人震撼,最关键的是,这个动画并没有使用一行JS代码,而是全部用HTML和CSS实现。画面中的乒乓球桌、球拍以及乒乓球都是通过CSS3绘制而成,包括球桌的阴影和乒乓球运动时的投影,3D效果表现得非常逼真。唯一不足的是,没有将比赛的队员表现出来,否则就真是完美了。

pure-css3-table-tennis

在线演示源码下载