阅读更多

0顶
1踩

Web前端

原创新闻 9个非常有意思的HTML5动画推荐

2017-05-23 10:33 by 副主编 jihong10102006 评论(0) 有9649人浏览
这次要推荐的是9款非常有意思的HTML5动画,这些动画有些是基于Cavans的,有些是SVG结合HTML5实现的,让我们一起来看看。

1、HTML5梦幻特效 可给任意元素添加魔幻效果

我们之前介绍HTML5动画特效比较多的是HTML5 3D特效,今天我们来换一种风格,来分享一款看起来比较魔幻的HTML5特效。它可以给网页上任意元素(图片、文字等)添加这么一种效果,即鼠标滑过时,元素上就会出现非常魔幻的动画特效,什么特效呢?你可以点开demo链接查看。

在线演示 / 源码下载

2、HTML5 Canvas正弦波动画 可自定义波长和速度

正弦波我们很熟悉,以前数学和物理课上经常会用到,还记得以前物理老师演示的正弦动画还是用flash制作的呢。今天我们要分享的这款HTML5 Canvas动画就和正弦波有关,我们可以稍稍修改一下HTML5代码即可定义波长、频率等正弦波的一些属性,很酷吧。

在线演示 / 源码下载

3、CSS3按钮发光动画 绚丽多彩

今天分享一款基于纯CSS3的发光按钮,多种色彩的按钮排列在网页上,伴随着闪闪发光的效果,CSS3的强大肯定会让你叹为观止。该CSS3按钮发光动画主要是利用了webkit的动画属性,让各种颜色规律性的发生变化。也许这么绚丽的CSS3按钮应用不那么广泛,但是在一些需要特效的网页中用来做提交表单按钮或者菜单项,那就非常方便了。

在线演示 / 源码下载

4、HTML5 WebGL水面水波荡漾特效

之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错。今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大石头,在水面上点击即可泛起水波,加上模拟光的照射,水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动,也可以拖动画面多视角观看该HTML5水波动画。

在线演示 / 源码下载

5、HTML5树叶飘落动画

今天再来分享一款HTML5树叶飘落动画,这款HTML5树叶飘落动画是基于webkit内核的,所以需要webkit内核的浏览器才能播放该动画,效果真的非常酷。

在线演示 / 源码下载

6、HTML5 3D衣服摆动特效

前面我们介绍过很多HTML5 3D动画特效,最经典的要算HTML5 WebGL水面水波荡漾特效。今天我再向大家分享一款HTML5 3D衣服摆动动画特效,动画也是在HTML5 Canvas上完成,它模拟衣服晾在绳子上,点击鼠标可以让衣服摆动起来,就行风吹动它一样,非常逼真炫酷。

在线演示 / 源码下载

7、HTML5鲸鱼动画

之前看到过同样效果的一款鲸鱼动画,不过可惜的是那个动画是用flash制作的。今天我找到了基于HTML5的鲸鱼动画,鲸鱼会随着鼠标的移动而游动,画面非常立体,鲸鱼也超级逼真。真的,HTML5确实很给力,HTML5动画完全可以完成flash能做的事情。

在线演示 / 源码下载

8、纯CSS3 Android Logo动画绘制

利用CSS3可以绘制很多复杂的图案图标,今天就利用纯CSS3实现Android Logo图标,该CSS3 Android Logo主要利用了CSS3中的圆角等属性,绘制出来的Logo非常逼真,同时该Android Logo还有动画效果,鼠标滑过Android小人的头和手时,小手还能够挥动。

在线演示 / 源码下载

9、纯CSS3绘制可爱小男孩动画

之前我们分享过几个纯CSS3动画特效,比如纯CSS3人物行走动画就非常酷,还有纯CSS3 Android Logo动画绘制也很酷。今天我们又要来分享一款纯CSS3绘制的可爱小男孩动画,除了绘制的小男孩逼真可爱外,其面部表情也十分酷。整个动画是利用纯CSS3实现,没有用图片和JS,不知道你们的浏览器中效果怎么样。

在线演示 / 源码下载

以上就是9个非常有意思的HTML5动画,欢迎收藏分享。 via:http://www.html5tricks.com/9-funny-html5-animation.html
  • 大小: 231.2 KB
  • 大小: 68.9 KB
  • 大小: 124.3 KB
  • 大小: 266.9 KB
  • 大小: 205.4 KB
  • 大小: 85.2 KB
  • 大小: 54.3 KB
  • 大小: 33.1 KB
  • 大小: 51.3 KB
0
1
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 【公告】近期网站功能更新一览

    [b]添加好友近期博客[/b] 进入博客管理页面的好友管理: 点击“所有好友近期博客”,进入可以看到好友们近期发表的博客和论坛主贴,也可以订阅所有好友近期博客和论坛主贴的RSS。如果对某人的文章感兴趣,...

  • pubg服务器维护公告7月31日,2021绝地求生3月31日更新公告_3.31更新维护内容一览_3DM网游...

    3.31更新维护内容一览问题:2021年绝地求生3月31日更新公告是什么?答案:1、首先就是本赛季(第十赛季)达到黄金V及以上可获得肌肉跑车皮肤,钻石V及以上可获得降落伞皮肤。在新赛季开始后会直接发放到玩家仓库中。2...

  • 全民超神服务器维护,全民超神更新维护公告 更新内容详细一览

    勇敢的召唤师们:《全民超神》将于7月28日...详细更新内容如下:【对战模式】:1、对战模式段位提升时,增加提示"提升或者保持段位等级,将会获得更多的钻石;2、对战模式的积分说明中“段位积分初始为1500”调整为“...

  • 楚留香服务器维护,楚留香3月30日更新维护公告 楚留香手游更新内容一览

    楚留香手游 3 月 30 日更新公告:限时活动:截止到 4 月 1 日0:00,最终参与万剑归宗•登剑阁的战队以及参与万剑归宗•华山论剑的玩家将最终被选定。4 月 1 日5: 00 后,少侠们可以前往对应界面查看具体的入围情况...

  • 侍魂胧月传说服务器维护,侍魂胧月传说4月17日更新维护公告一览

    5.0标签:立即下载侍魂胧月传说在4月17日进行了更新维护,本次将开启武道会杯赛,然后就是对游戏相关活动数据等的优化调整,很多玩家关注更新内容,下面西西小编为大家带来侍魂胧月传说4月17日更新维护公告一览。...

  • 极光服务器维护,极光世界服务器维护更新公告 V10.650内容一览

    尊敬的各位玩家:为给广大用户提供一个顺畅、稳定、优质的游戏环境,《极光世界》将于8月10日上午08:00-09:30对除网通一区外其余服务器进行更新维护;如遇特殊情况,维护时间将会顺延,由此给您带来的不便我们深表...

  • 王者荣耀赛季更新服务器维护到什么时候,王者荣耀赛季更新到几点?s24维护公告最新内容一览[多图]...

    王者荣耀24赛季的停机更新会持续到什么时候?...王者荣耀s24维护公告最新内容一览更新时间:正式服/抢先服:2021年6月22日23:30-6月23日9:30停机更新(6月22日23:00禁止进入PVP和人机对战)更新方式:停机更新更新范...

  • 无限可能 | Flutter 2 重点更新一览

    新版本中的滚动条 widget 已适配桌面平台 更新后的 Scrollbar Widget 为桌面平台提供了预期的相同交互功能,例如支持拇指拖动、点击滚动条空白区域进行上下翻页,以及将鼠标悬停在滚动条的任何部位以显示一个轨道等...

  • 天涯明月刀手游为什么服务器维护,天涯明月刀手游12.7日更新公告 更新内容详情一览...

    更新公告QQ/微信大区所有服务器于12月7日02:00-06:00停服维护,维护完成后少侠登录游戏可前往邮箱领取200绑定点券、100琅纹碎片、20万碎银的更新补偿。本次维护更新主要内容如下:一、优化调整【师徒系统优化】1、...

  • 鸿蒙石隐藏任务,斩魂7月18日维护更新公告:新增日常玩法一览

    新手指引优化,现在带有精铁之器任务&首次打开商店时,将有商店功能的清晰指引; 人物卡、命盘指引优化; 防沉迷系统优化,现在填写防沉迷资料后可以在线刷新防沉迷通过状态; PVP 提高竞技场的基础命中率,以降低...

  • 鸿蒙渊更新公告,《天下3》更新公告(版本2.0.703)

    本次更新结束后,游戏客户端版本将从2.0.702上升到2.0.703,更新客户端后进入游戏。请各位玩家相互转告,并留意游戏时间,以免造成不必要的损失。对于停机期间给玩家带来的不便,敬请见谅,网易游戏感...

  • steam服务器维护2021,2021绝地求生3月10日维护更新公告_3.10维护更新内容一览_3DM网游...

    3.10维护更新内容一览问题:2021绝地求生3月10日维护更新公告内容是什么?答案:【正式服维护公告】绝地求生将在北京时间3月10日(星期三)08点30分开始正式服的停机维护。- 维护开始时间:3月10日(星期三)08点30分...

  • 逆水寒7.25服务器维护,逆水寒7月4日更新维护公告 角色交易功能上线

    原标题:逆水寒7月4日更新维护公告 角色交易功能上线逆水寒7月4日更新了什么内容,7月4日正式服中加入了角色交易的新功能,另外天江之战活动也正式开启,以下来看下完整的更新公告。 各位自在同门:为了保证服务器的...

  • 王者服务器维护5月20日,王者荣耀4月20日更新了什么 王者荣耀4月20日更新公告一览...

    第 10 页 bug修复 1. 修复了芈月普通攻击不能暴击的BUG 2. 修复了公孙离大招击退... 观战系统的英雄头像会显示玩家所用英雄的皮肤图像 以上就是小编为大家带来关于王者荣耀4月20日更新公告一览,希望对大家有所帮助!

  • Google Play 更新一览 | 2021 Android 开发者峰会

    在今年的 Android 开发者峰会 上,我们分享了一些一直在构建的新功能,为您在我们平台上的发展提供助力,包括信任和安全方面的提升、提高您应用质量并改善获利的工具,还有一些针对游戏的更新,以及激动人心的全新...

  • 服务器升级微信公告,【更新公告】8月6日先锋服务器停服更新公告

    【停服更新】游戏将于8月6日14:30对四个服务器(QQ1服、QQ17服、微信1服、微信17服)进行停服更新,预计停服2小时,开服时间有可能提前或者延后,其余服务器不受影响。【重点内容】我们充分参考了旅者们的反馈意见,对...

  • 绝地求生 服务器临时维护,绝地求生大逃杀4月12日临时维护公告 绝地求生4月12日更新内容一览...

    绝地求生4月12日公布了1.0版本第10轮临时维护公告,预计上午10点进行预计3小时的临时维护,想知道详细情况就随小编一起往下看吧!我们将在北京时间4月12日上午10点开始正式服的停机维护。维护开始时间: 4月12日 上午...

  • pendulum-2.1.2-cp39-cp39-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

  • Nginx配置文件中FastCGI相关参数理解

    Nginx配置文件中FastCGI相关参数理解

  • Pillow-8.4.0-cp310-cp310-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

Global site tag (gtag.js) - Google Analytics