阅读更多

9顶
0踩

Web前端

原创新闻 8 款效果惊艳的 HTML5 3D 动画

2014-06-25 17:21 by 见习编辑 html5_dev 评论(8) 有36934人浏览
HTML5凭借着其强大的3D渲染能力,让很多开发者都跃跃欲试,都想亲自体验一下HTML5的3D效果。今天本文就分享8款效果惊艳的HTML5 3D动画,您可以捡现成的看看,顺便也可以学习学习HTML5的相关知识。

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

这是一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大石头,在水面上点击即可泛起水波,加上模拟光的照射,水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动,也可以拖动画面多视角观看该HTML5水波动画。



在线演示  /  源码下载

2、HTML5 Canvas 3D旋转物体动画,模糊发光特效

今天要介绍的这款HTML5 3D动画是一个旋转的物体,并且利用CSS3的特性,物体会发出模糊和发光的动画特效,旋转起来效果特别酷。



在线演示  /  源码下载

3、HTML5 3D旋转图片相册,可鼠标悬停

这款HTML5 3D旋转图片相册又非常绚丽,是一面立体的图片墙,图片不停的切换,鼠标滑过图片时即可激活图片查看。



在线演示  /  源码下载

4、HTML5 3D衣服摆动特效

这是一款HTML5 3D衣服摆动动画特效,动画也是在HTML5 Canvas上完成,它模拟衣服晾在绳子上,点击鼠标可以让衣服摆动起来,就行风吹动它一样,非常逼真炫酷。



在线演示  /  源码下载

5、HTML5 3D立方体阵列,有规律的旋转动画

这是一款基于HTML5的3D立方体动画特效,特别的是,它不是一个立方体,而是由多个立方体组成的立方体阵列,同时阵列中的每一个立方体都会有规律的旋转,从而产生很酷的动画效果。



在线演示  /  源码下载

6、HTML5 3D手掌动画,看起来很抽象

这是一款很酷的HTML5 3D动画,它是用一个个像素点构造的3D立体手掌动画,你可以拖动鼠标从不同的侧面观看这只非常抽象的手掌。



在线演示  /  源码下载

7、HTML5/CSS3书本翻页3D动画

这是一款基于HTML5和CSS3的书本翻页3D动画,当我们将鼠标滑过书本时,书本就会自动一页页翻过去,书本的3D效果非常不错。



在线演示  /  源码下载

8、HTML5 3D阴影文字特效

这是一款非常简单大气的HTML5 3D文字特效,这个3D文字特效是通过文字加粗以及文字阴影来实现的,效果非常不错。



在线演示  /  源码下载

以上就是8款效果惊艳的HTML5 3D动画,欢迎收藏分享。
  • 大小: 54 KB
  • 大小: 39.4 KB
  • 大小: 40.2 KB
  • 大小: 20 KB
  • 大小: 24.1 KB
  • 大小: 14.5 KB
  • 大小: 15.8 KB
  • 大小: 19.7 KB
来自: html5tricks
9
0
评论 共 8 条 请登录后发表评论
8 楼 小小与大大 2014-09-03 19:03
mark.
7 楼 huoquan 2014-08-21 13:43
强大的UI框架点这里
6 楼 YuHuang.Neil 2014-07-03 22:04
强大~
5 楼 lz958942 2014-07-03 09:18
兼容IE的比较少
4 楼 SpringJava 2014-07-01 11:52
 
3 楼 wkkyo 2014-06-30 09:02
亮瞎我的眼
2 楼 yangliweng2 2014-06-27 09:59
没想到HTML5居然这么强大
1 楼 sxwgf0003 2014-06-26 10:18
mark  

发表评论

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

相关推荐

  • 分享10款效果惊艳的HTML5图片特效

    在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家。 1、HTML5 3D正方体旋转动画 很酷的3D特效 之前我们分享过很多非常不错...

  • 8款效果惊艳的HTML5 3D动画

    今天本文就分享8款效果惊艳的HTML5 3D动画,您可以捡现成的看看,顺便也可以学习学习HTML5的相关知识。1、HTML5 WebGL水面水波荡漾特效之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错。今天再向...

  • 8款惊艳的HTML5粒子动画特效,超级惊艳 8款HTML5动画特效推荐源码

    1、HTML5 Canvas发光Loading动画之前我们分享...Loading旋转图标是在canvas画布上绘制的,整个loading动画是发3D的视觉效果,HTML5非常强大。2、jQuery球状放大镜特效插今天我们要来分享一款基于jQuery的放大镜特效...

  • html5 3d动画效果代码,精选9款迷人的HTML5 3D动画效果及源码

    原标题:精选9款迷人的HTML5 3D动画效果及源码新的一周开始了,今天小编要为大家分享最新整理的9款HTML5 3D动画效果及源码下载,前端爱好者都可以来学习一下,以下就是详细的内容,一起来看看。1、HTML5 3D图片折叠...

  • html5 粒子动画效果制作,8款惊艳的HTML5粒子动画特效

    原标题:8款惊艳的HTML5粒子动画特效HTML5确实非常强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果,粒子动画在HTML5应用中也是比较消耗本地资源的,尤其是CPU,但是有些HTML5粒子效果确实能...

  • html5 游戏 动画设计,11款效果惊艳的HTML5动画应用

    11款效果惊艳的HTML5动画应用来源:极客头条HTML5真的很棒,我们这个网站也每天在为大家分享很多炫酷而实用的HTML5和CSS3应用。今天要分享的有很多效果惊艳而且好玩的HTML5动画应用,特别是一些HTML5游戏更加令人...

  • html5放大动画效果,超级惊艳 10款HTML 5动画特效推荐

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

  • html5有哪些小特效,超级惊艳 10款HTML5动画特效推荐

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

  • html5 3d资源,视觉盛宴 HTML5 3D动画应用赏析

    之前介绍过基于jQuery的3D旋转插件是利用多张多视角图片播放来实现的,而今天分享的这款HTML5 3D旋转动画是利用纯HTML5技术实现的,该动画实现了HTML5 Logo旋转的效果。2、HTML5 3D实景地图动画 3D效果很酷利用HTML5...

  • 单页面动画 html5,9款惊艳的HTML5/CSS3动画应用赏析

    1、HTML5 Canvas实现会跳舞的时间动画这是一款很有意思的HTML5Canvas时间动画,总体来说,它是一个可以和客户端同步的时钟,其特点是当时间走动时,数字将会散落成一个个粒子动画,这种HTML5 Canvas动画在之前也有...

  • 第11讲:深入理解指针(1).pdf

    第11讲:深入理解指针(1)

  • springboot整合 freemarker方法

    springboot整合 freemarker方法

  • 第14讲:深入理解指针(4).pdf

    第14讲:深入理解指针(4)

  • 同行者4.1.2语音助手

    《同行者4.1.2语音助手:车机版安装详解》 在现代科技日新月异的时代,智能车载设备已经成为了汽车生活的重要组成部分。"同行者4.1.2"便是这样一款专为车机设计的语音助手,旨在提供更为便捷、安全的驾驶体验。该版本针对掌讯全系列设备进行了兼容优化,让车主能够轻松实现语音控制,减少驾驶过程中的手动操作,提升行车安全性。 我们来了解下"同行者4.1.2"的核心功能。这款语音助手集成了智能语音识别技术,用户可以通过简单的语音指令完成导航、音乐播放、电话拨打等一系列操作,有效避免了因操作手机或车机带来的分心。此外,其强大的语义理解和自学习能力,使得它能逐步适应用户的口音和习惯,提供更个性化的服务。 在安装过程中,用户需要注意的是,"同行者4.1.2"包含了四个核心组件,分别是: 1. TXZCore.apk:这是同行者语音助手的基础框架,包含了语音识别和处理的核心算法,是整个应用运行的基础。 2. com.txznet.comm.base.BaseApplication.apk:这个文件可能包含了应用的公共模块和基础服务,为其他组件提供支持。 3. TXZsetting.apk:这

  • 市场拓展主管绩效考核表.xls

    市场拓展主管绩效考核表

  • “线上购车3D全方位体验:汽车模型展示与个性化定制功能”,three.js案例- 线上购车3d展示(源码) 包含内容:1.汽车模型展示;2.汽车肤;3.轮毂部件更;4.开关车门动画;5.汽车尺寸测量

    “线上购车3D全方位体验:汽车模型展示与个性化定制功能”,three.js案例- 线上购车3d展示(源码) 包含内容:1.汽车模型展示;2.汽车肤;3.轮毂部件更;4.开关车门动画;5.汽车尺寸测量;6.自动驾驶;7.镜面倒影;8.hdr运用;9.移动端适配; 本为html+css+three.js源码 ,核心关键词:three.js案例; 线上购车3D展示; 汽车模型展示; 汽车换肤; 轮毂部件更换; 开关车门动画; 汽车尺寸测量; 自动驾驶; 镜面倒影; HDR运用; 移动端适配; HTML+CSS+three.js源码。,"Three.js源码:线上购车3D展示案例,含汽车模型、换肤、轮毂更换等九大功能"

  • (数据权威)中国城市_县域统计面板数据二合一

    数据名称:2000-2022年各县市区主要社会经济发展指标面板数据 数据类型:dta格式 数据来源:中国县域统计

  • 120页-环卫车项目初步方案.pdf

    一、智慧环卫管理平台的建设背景与目标 智慧环卫管理平台的建设源于对环卫管理全面升级的需求。当前,城管局已拥有139辆配备车载GPS系统、摄像头和油耗传感器的环卫车辆,但环卫人员尚未配备智能移动终端,公厕也缺乏信息化系统和智能终端设备。为了提升环卫作业效率、实现精细化管理并节省开支,智慧环卫管理平台应运而生。该平台旨在通过信息化技术和软硬件设备,如车载智能终端和环卫手机App,实时了解环卫人员、车辆的工作状态、信息和历史记录,使环卫作业管理透明化、精细化。同时,平台还期望通过数据模型搭建和数据研读,实现更合理的环卫动态资源配置,为环卫工作的科学、健康、持续发展提供决策支持。 二、智慧环卫管理平台的建设内容与功能 智慧环卫管理平台的建设内容包括运行机制体制建设、业务流程设计、智慧公厕系统建设、网络建设、主机和储存平台需求、平台运维管理体系、硬件标准规范体系以及考核评价体系等多个方面。其中,智慧公厕系统建设尤为关键,它能实时监控公厕运行状态,保障公厕的清洁和正常运行。平台建设还充分利用了现有的电子政务网络资源,并考虑了有线和无线网络的需求。在功能上,平台通过普查、整合等手段全面收集环卫车辆、企业、人员、设施、设备等数据,建立智慧环卫基础数据库。利用智能传感、卫星定位等技术实现环卫作业的在线监管和远程监控,实现对道路、公共场所等的作业状况和卫生状况的全面监管。此外,平台还建立了环卫作业网格化管理责任机制,实现从作业过程到结果的全面监管,科学评价区域、部门、单位和人员的作业效果。 三、智慧环卫管理平台的效益与风险规避 智慧环卫管理平台的建设将带来显著的环境、经济和管理效益。环境方面,它将有力推进环境卫生监管服务工作,改善环境卫生状况,为人民群众创造更加清洁、卫生的工作和生活环境。经济方面,通过智慧化监管,大大降低了传统管理手段的成本,提高了监管的准确性和效率。管理方面,平台能够追踪溯源市民反映的问题,如公厕异味、渣土车辆抛洒等,并找到相应的责任单位进行处置,防止类似事件再次发生。同时,平台还拥有强大的预警机制功能,能够在很多环卫问题尚未出现前进行处置。然而,平台建设也面临一定的风险,如部门协调、配合问题,建设单位选择风险以及不可预测的自然灾害等。为了规避这些风险,需要加强领导、统一思想,选择优秀的系统集成商承接项目建设,并做好计算机和应用系统的培训工作。同时,也要注意标准制定工作和相关法律法规的制定工作,以保证系统建设完成后能够真正为环卫管理工作带来便利。

  • 36 -企业管理主管绩效考核表1.xlsx

    36 -企业管理主管绩效考核表1

  • 1.1 -1.4 工程代码

    1.1 -1.4 工程代码

Global site tag (gtag.js) - Google Analytics