1.超炫酷HTML5 Canvas 3D旋转地球动画

这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们也可以通过点击全屏按钮来全屏观看地球旋转动画,记得在很早以前我们也分享过一款基于HTML5 Canvas的地球动画,请看这里。

在线演示

源码下载

2.HTML5 Canvas 3D文字动画 支持鼠标滚轮缩放

之前我们已经为大家分享过很多款炫酷和实用的HTML5文字动画特效,最经典的就是这款HTML5 Canvas幻彩火焰文字特效。这次给大家带来的是另外一款基于HTML5 Canvas 3D文字动画,它的特点是按住鼠标左键拖动文字可以旋转文字,从不同角度观察文字;按住鼠标左键可以移动文字;另外滑动鼠标滚轮可以缩放文字大小。

在线演示

源码下载

3.HTML5 Canvas五彩烟雾模拟动画

之前我们利用HTML5技术在Canvas上模拟了很多东西,比如最近刚分享的HTML5 Canvas 多种炫酷3D粒子图形动画。这次给大家带来的也是一款基于HTML5 Canvas的动画特效,它模拟了五彩烟雾的流动效果,这在Canvas上实现还是比较简单的。

在线演示

源码下载

4.CSS3带头像的垂直彩色菜单

今天我们要给大家分享一款比较特别的CSS3菜单,这款菜单是垂直样式的,而且当鼠标滑过菜单项时,当前菜单项即可显示一个精美的头像,并且在头像旁边显示一些格式化的文字。另外,每一个菜单项的背景色可以动态渲染。

在线演示

源码下载

5.HTML5/CSS3 3D立方体拼图 支持方向键旋转

之前我们分享过不少基于HTML5/CSS3和Canvas的3D立方体旋转动画,比如这款超绚丽CSS3多色彩发光立方体旋转动画,也有基于立方体做的菜单应用,比如超实用CSS3 3D菜单 菜单项悬浮凸出立体效果。今天我们要分享的是一款基于HTML5和CSS3的3D立方体拼图应用,一共有8个小立方体组成的3D拼图,我们可以点击立方体或者方向键完成拼图,同时我们也可以让立方体保持旋转。

在线演示

源码下载

6.CSS3/SVG实现的任务列表 超酷的按钮点击动画

这是一款外观很漂亮的CSS3/SVG任务列表插件,我们可以在输入框中输入自己需要完成的任务名称,点击添加按钮后即可将任务添加到列表中去。这本来是一件非常普通的功能,但是利用CSS3和SVG,我们在添加按钮点击时出现非常炫酷的动画特效,这样的特效在任务添加到列表和删除列表中都同样会出现,非常不错。甚至我们可以将这款插件修改后变成一款非常华丽的评论插件。

在线演示

源码下载

7.CSS3水平滑杆插件 带气泡数值提示

今天我们要给大家介绍一款很酷的水平滑杆插件,和之前分享的jQuery双向滑动杆 设置数值百分比和超可爱的纯CSS3滑动开关按钮类似,基本都是通过CSS3来美化浏览器默认的水平滑杆。今天分享的这款有一个特点,就是滑杆的数值带有气泡提示框,而且它就像气球一样拖动时会左右摇晃。

在线演示

源码下载

8.CSS3/SVG自定义单选框Radiobox跳跃选择动画

这又是一款利用CSS3实现的自定义美化版Radiobox单选框,和之前分享的CSS3自定义发光radiobox单选框类似,这款radiobox也是利用CSS3重写radiobox样式实现的。另外,这款自定义单选框还结合了SVG的特性,实现了单选框选中时的跳跃动画。

在线演示

源码下载

9.基于HTML5 WebGL的3D星云动画特效

今天我们给大家分享一个基于HTML5 Canvas的星云动画特效,整个画面模拟了一个星系的外观,比如模拟了太阳系,有很多小行星围绕着星系中心旋转,星系中心也显得格外亮丽。这些小星点都是在Canvas上绘制而成,同时我们还可以拖拽鼠标从不同视角观看星云,非常大气。

在线演示

源码下载

10.jQuery Select下拉框美化插件 菜单淡如淡出动画

尽管现在的浏览器更新换代后更加强大,浏览器默认控件也逐渐变得美观起来,特别是Select下拉框,已经不再是以前IE6那样的丑陋了。但是今天我们要为大家分享一款基于jQuery的Select下拉框美化插件,它完全重写了浏览器默认的Select下拉框样式,而且在下拉菜单展开时还伴随淡如淡出的动画效果,非常不错。当然我们以前也分享过一些类似的插件,可以看看漂亮实用的Select下拉框美化插件Tether,也可以看看这款jQuery 美化界面的下拉框。

在线演示

源码下载

程序猿必备的10款超炫酷HTML5 Canvas插件的更多相关文章

  1. 程序猿必备的10款超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了10个非 ...

  2. 程序猿必备的10款web前端开发插件一

    1.CSS3实现的火柴燃烧Loading加载动画 这次我们要给大家分享一款非常特别的CSS3 Loading加载动画,整个Loading加载动画就好像是火柴在燃烧一样,不足的是火苗并没有那么真实,比较 ...

  3. 程序猿必备的10款web前端动画插件

    1.基于jQuery的瀑布流图片筛选插件 瀑布流的展现方式在目前的网页中用得越来越广泛,特别是图片和首页文章的动态加载. 今天分享的这款就是基于jQuery的瀑布流图片筛选插件,我们可以点击图片分类名 ...

  4. 程序猿必备的10款web前端动画插件一

    1.动画SVG框架幻灯片 在幻灯片之间切换时显示动画SVG帧的实验性幻灯片.不同的形状可以用来创建各种风格. 我们想和大家分享一个实验幻灯片.我们的想法是在从一个幻灯片转换到另一张幻灯片时,使SVG帧 ...

  5. 程序猿必备的8款web前端开发插件三

    1.HTML5 Canvas 3D波浪翻滚动画 之前我们分享过好几款基于HTML5 Canvas的波浪和水波纹动画,比如这款HTML5 3D波浪起伏动画特效和这款超酷无比的HTML5 WebGL水面水 ...

  6. 你见过吗?9款超炫的复选框(Checkbox)效果

    复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能.下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS ...

  7. 全栈开发必备的10款Sublime Text 插件

    Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.Sublime Text 更妙的是它的可扩展性.所以,这里挑选了全栈开发必备的10款 Sublime T ...

  8. 全栈开发必备的10款 Sublime Text 插件

    Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.Sublime Text 更妙的是它的可扩展性.所以,这里挑选了全栈开发必备的10款 Sublime T ...

  9. [开源硬件DIY] 自制一款精致炫酷的蓝牙土壤温湿度传感器,用于做盆栽呵护类产品(API开放,开发者可自行DIY微信小程序\安卓IOS应用)

    目录 前言: 1. 成品展示 2. 原理图解析 3. pcb设计 4. 嵌入式对外提供接口 4.1 蓝牙广播 4.2 蓝牙服务和属性 4.3 数据包格式 4.4 数据通信模型 重要 . 前言: 本期给 ...

随机推荐

  1. asp.net core选项Options模块的笔记

    这篇博客是写给自己看的.已经不止一次看到AddOptions的出现,不管是在.net core源码还是别人的框架里面,都充斥着AddOptions.于是自己大概研究了下,没有深入,因为,我的功力还是不 ...

  2. WCF、WebAPI、WCFREST、WebService、WPF之间的区别

    在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下,你有很多的选择来构建一个HTTP Services.我分享一下我对 ...

  3. javascipt

    JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Net ...

  4. C++,java信息,文件传输

    java客户端 package client; import java.io.DataOutputStream; import java.io.File; import java.io.FileInp ...

  5. WebKit discarded an uncaught exception in the webView:decidePolicyForNavigationAction:request:frame:decisionListener: delegate: <NSInvalidArgumentException> -[__NSArrayM objectForKey:]: unrecognized s

    <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv=&quo ...

  6. Cocos Creator_发布到微信小游戏平台

    观看官方教程,地址 传送门: http://docs.cocos.com/creator/manual/zh/publish/publish-wechatgame.html CocosCreator接 ...

  7. c# 后台绑定treeview 单个tab

    <wijmo:C1TreeView ID="C1TreeView1" runat="server" ShowCheckBoxes="true&q ...

  8. jmeter接口测试-文件下载

    http://imgsrc.baidu.com/forum/pic/item/a89b033b5bb5c9ea901d1997dd39b6003bf3b3dc.jpg    网上找了一张高圆圆的图片 ...

  9. JDBC接口

    Jmeter实例8:JDBC接口 加线程组.加JDBC配置信息: 配置信息详情如下:默认展示值不用修改 必填信息: Database UR:固定格式,将IP.端口号.数据库名修改成自己要用的数据库信息 ...

  10. 安装 VS2017 的正确姿势

    自从装了长城带宽,我的肠子就变成青色的了. 国内的网络环境,真的是有很大的不同,有的人装 VS 的时候,号称满速,有的人(其实就是我)要等它下载很久,还告诉我有个组件没有安装成功.很久很久以前,VS ...