分类目录归档:HTML5应用

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

在线演示源码下载

基于Vue.js的迷你音乐播放器

这次我给大家带来一个十分不错的音乐播放器,它基于Vue.js,外观十分迷你,可以在手机等移动设备上使用。这个基于vue的音乐播放器的特点是,可以自定义一个播放列表,可以给每一首歌曲指定一个封面图片和分享链接,这让整个播放器看起来非常专业。另外,播放器还支持暂停/播放功能,也支持任意进度的拖拽定位。

vue-js-mini-music-player

在线演示源码下载

HTML5 3D全屏相册动画

这是一款十分精美别致的HTML5 3D相册动画,同样它也是一个不错的全屏焦点图插件,在全屏应用中显得非常大气。我们可以在相册中放置几张图片,当前激活的相片将会高亮显示,其余的相片将会以3D立体的方式半隐藏在里面,另外再加上图片边缘的阴影,使整个相册动画显得比较高端,非常适合在产品宣传页上使用。

html5-3d-slider

在线演示源码下载

基于Three.js的图片撕碎切换动画

这次要给大家带来一个特别炫酷的HTML5 Canvas图片切换动画,它是基于three.js动画库实现的,主要动画是图片以撕碎的特效进行切换,相当震撼。另外,在图片切换过程中,你也可以通过鼠标拖动来查看切换时的具体细节效果。如果将它制作成一个效果非常独特而华丽的相册或者焦点图插件,相信会很不错的。

three-js-image-animation

在线演示源码下载

JavaScript 动画折线图 带阴影 3D 效果

今天给大家带来一款比较简单清新的JavaScript动画折线图,折线图的数据区域带有阴影效果,因此整个图表看起来有着一点3D立体的视觉效果。另外,这个JS折线图并没有采用第三方的图表插件,这也各有利弊,好处在于不受庞大框架的束缚,修改灵活,但缺点也在于开发者如果想要其他类型的图表就需要再自己编写一套代码了。

javascript-3d-line-chart

在线演示源码下载

HTML5 3D地球仪 可按经纬坐标定位

今天要给大家分享一个基于HTML5的3D地球仪动画,地球仪不仅可以自动自西向东旋转,而且还可以旋转到指定经纬度坐标。另外,还有一个控制面板,可以控制地球是否自转、光晕是否显示,以及地理缩放。你也可以通过拖拽鼠标来改变地球仪的视角,可以将它移至南北极的视角,也可以移至赤道的视角,非常方便。

html5-3d-globe

在线演示源码下载

HTML5 WebGL 3D樱花飘落动画

今天要给大家分享一个非常炫酷的HTML5 3D樱花飘落动画,基于WebGL技术。每一片樱花落叶都是在canvas上绘制而成,而且樱花叶片也会随着不同的角度发出不同的色泽光芒,总体呈现出3D立体的视觉效果。整个樱花飘落动画非常大气,如花雨一般,让人倍感震撼。另外,整个动画还可以通过按钮控制开启和暂停。

html5-webgl-sakura-animation

在线演示源码下载