• ( 转 )超级惊艳 10款HTML5动画特效推荐


    今天我们要来推荐10款超级惊艳的HTML5动画特效,有一些是基于CSS3和jQuery的,比较实用,特别是前几个HTML5动画,简直酷毙了,现在将它们分享给大家,也许你能用到这些HTML5动画和jQuery应用。

    1、HTML5 Canvas发光Loading动画

    之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果,HTML5非常强大。

    html5-canvas-shine-loading

    在线演示        源码下载

    2、jQuery球状放大镜特效插件

    今天我们要来分享一款基于jQuery的放大镜特效插件,和其他放大镜不同的是,这款jQuery放大镜插件是球状的,看上去有3D的视觉效果。当你把鼠标滑过页面上的文字时,即会出现很酷的球状放大镜,来放大当前区域的文字。并且以球心为中心点向外文字逐渐变小,这就产生了立体感。

    jquery-ball-zoom-in

    在线演示        源码下载

    3、HTML5 Canvas粒子模拟效果

    这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案,就像你在玩沙画一样,效果非常不错。这里,我们应用了一些HTML5的特性,让这个粒子动画显得相当动感。

    html5-canvas-particle-effect

    在线演示        源码下载

    4、HTML5/CSS3带区域地图的联系表单

    之前我们分享很多样式和功能各异的CSS3联系表单,比如HTML5/CSS3简易联系表单 扁平化风格CSS3联系表单 背景透明迷人等等,都非常不错。今天我们要来分享一款功能更加强大的HTML5/CSS3联系表单,它可以选中不同区域显示相应的地图,然后针对该区域填写联系表单。

    html5-css3-contact-form-map

    在线演示        源码下载

    5、CSS3 3D立方体Loading加载动画特效

    之前我们分享过一些HTML5和CSS3的3D立方体特效,他们都是可以旋转来展示3D立体的效果。这次分享的这款CSS3 3D立方体确是用来做Loading加载动画的,9个小立方体上下浮动,呈现波浪的效果,并且,这个Loading动画还利用了CSS3的阴影属性让这些立方体更充满3D色彩。

    css3-3d-cube-loading

    在线演示        源码下载

    6、超具立体感的CSS3 3D菜单 菜单项带小图标

    记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单 3D立方体菜单项HTML5/CSS3自定义下拉框 3D卡片折叠动画,效果都很漂亮。今天我们要再分享一款更酷的CSS3 3D立体菜单,这款菜单侧躺在页面上,每个菜单项都有不错的小图标。

    css3-3d-navigation-menu

    在线演示        源码下载

    7、基于Bootstrap和CSS3的响应式UI框架

    还记得之前我们分享过的Metro扁平化风格的jQuery UI组件么,看上去是不是非常清新和绚丽?今天我们要来分享一组基于Bootstrap和CSS3的响应式UI框架,这个UI框架中,包含了自定义CSS3按钮、自定义CSS3复选框和单选框、自定义CSS3下拉框等等,外观非常漂亮。

    bootstrap-css3-ui-framework

    在线演示        源码下载

    8、纯CSS3立体动画菜单 菜单项按下有内阴影

    这次小编来分享一款利用纯CSS3实现的立体动画菜单,该菜单的实现非常简单,并没有太多的特效渲染,但是看起来却非常干净漂亮,尤其配合灰黑色的背景,让菜单显得有点立体的感觉。另外,当我们点击菜单项时,菜单项将会出现内阴影的视觉效果。

    css3-ckean-mini-menu-animation

    在线演示        源码下载

    9、HTML5 Canvas动画按钮 点击水波扩散效果

    之前我们分享的都是基于CSS3的自定义按钮,今天我们来分享一款基于HTML5 Canvas的动画按钮,每一个按钮都是一个canvas画布,这就很灵活,你可以在canvas绘制任意你喜欢的东西作为按钮的背景画面,并且,还可以有动画特效。

    html5-canvas-animated-button

    在线演示        源码下载

    10、CSS3/jQuery实现Tab菜单小工具

    几天要分享一款基于CSS3和jQuery的Tab菜单,这款Tab菜单的外观非常简洁清新,tab选项卡的上边框有加粗的线条,让这些tab菜单按钮显得很有立体感。另外有一点不足的是,tab切换时没有加入CSS3动画效果。这款tab菜单可以放到你网页的侧边栏作为小工具。

    css3-jquery-tab-menu-widget

    在线演示        源码下载

    以上就是10款超级惊艳的HTML5动画特效,欢迎收藏分享。

    本文链接:http://www.html5tricks.com/10-wonderful-html5-animation.html
    本文作者:html5tricks – 超人

  • 相关阅读:
    OSPF如何生成默认路由(转)
    H3C MSR830 V5.01 PPPOE拨号配置
    H3C V5 Ipsec 野蛮模式
    OSPF NSSA区域内有多个ABR时,7类LSA转换5类LSA的站点选择(转)
    什么是MTU?为什么MTU值普遍都是1500?(转)
    OSPF链路状态数据的结构
    Cisco Cpos STM 配置示例(转)
    Juniper SRX Junos升级(自己做的升级)
    Juniper SRX Junos升级(转)
    接口自动化测试 python+request+excel(踩‘坑’)
  • 原文地址:https://www.cnblogs.com/aimyfly/p/7562072.html
Copyright © 2020-2023  润新知