d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 perspective: 800px;(景深)和使立方体呈3d效果展示的transform-style:preserve-3d来实现;
全屏的雪花飘落:用原生js来实现(随机的大小,透明度的变化等),有详细注释;
html5主要是实现背景音乐和头部的字体卷动效果。
< audio src=“music.mp3” hidden=“true” loop=“true” preload=“auto”>< /audio> 或者< embed src=“music.mp3” type=""/>
html部分:
css部分
js部分
是不是也想要加入HTML5的学习呢?如果你想要在短时间内掌握HTML5 专业技术,不妨就选择千锋重庆HTML5培训。千锋重庆HTML5技术开发培训课程采用全程面授教学,拒绝视频同步授课,拒绝双元视频班教学,拒绝直播授课,教师一对一指导学员做项目,全新打造“主流技术+前沿技术+企业级联动”教学课程,重新优化和定义HTML5技术,采用最新版本技术开展教学,致力于为学员打造最牛的、最新的技术,助力学员拿下BAT级企业Offer。
千锋重庆HTML5技术开发培训,让你在同样的起跑线,跑出不一样的高度。
在没有CSS3之前,我们只能在网页上实现2D平面动画,但是随着CSS3技术的普及,我们可以很方便的在网页上实现一个3D立方体。今天给大家带来的便是一个基于jQuery和CSS3的3D立方体盒子,我们可以通过鼠标拖拽浏览盒子的每一个面,另外,3D盒子的面都可以自定义封面图片,你可以为每一个面选择不同的图片,并还可以自定义盒子的尺寸大小。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
提供源码下载原文见。
原文地址:https://www.html5tricks.com/jquery-css3-3d-image-box.html
面这个有点萌的3D小怪物就是用H5工具(iH5.cn)做滴,而且整个H5只有100K不到。
在介绍详细的制作教程之前,先给大家看几个简单的案例和应用:
.
案例一:3D画廊
http://cee2a4eeac65.ih5.cn/idea/HaPfHJB
【适用场景】
3D的图片排列不仅给读者一种耳目一新的立体感,同时也使得同一个页面能够展示更多的内容,适用于各种新闻内容和视频的展示。
.
案例二:3D微官网
http://cee2a4eeac65.ih5.cn/idea/0P2gVTZ
【适用场景】
用立方体构成3D模型,可以组成3D文字或者企业logo等,非常适合用于企业品牌展示,同时组合成各种3D文字,用于表白或者节日祝福也是不错的方式~
.
案例三:创意3D交互动画
http://cee2a4eeac65.ih5.cn/idea/9bD2Uku
【适用场景】
如果H5动画增加了一个维度会是什么感觉?试着把你以前做过的H5动画,用3D的方式表达,你会得到一个全新的作品。
.
颠覆性的H5技术,是未来所有创意工作者的机遇。
虽然用H5做3D动画不是很新鲜的事,但重点是用可视化工具就能构建3D图形,这是一件具备革新意义的事情。
首先,对于技术实现的革新:
在这之前,浏览器中实现3D构图和交互,是一件非常复杂的事情,要编代码、适配环境,而且编程人员还要跟3D动画建模师渲图师等等沟通实现,效率很低,而且水平一般的前端程序员都不一定能做好。但是现在有了可视化的工具操作,大大提升了制作效率,并且不懂代码的小白也可以掌握。
类似这样简单拖拽的操作,简直是编程小白的福音有木有,所见即所得:
第二,对于设计创作的革新:
很多具备动画基础和平面基础的设计师,原来苦于不懂前端编程只能画画平面图,但他又不可能轻易就找个技术团队帮他实现设计创意,但可视化H5工具的出现,使得设计师能不依赖技术自己创作基于浏览器的交互式3D动画,大大拓展了设计师的发挥空间。
像下面这颗水灵灵的眼球,设计师用H5工具两三下就搞定了,有兴趣可以研究一下:
第三,对于H5商业应用的革新:
丰富的创作+社交分享,这是可视化工具对H5在商业领域应用的强力驱动。工具化不仅提高了效率,而且让普通人也能成为H5的“开发者”,特别是大量的设计师,因为本身具备设计技能,借助不需要编程基础的工具可以做出超出想象的H5应用。
现在H5工具能够实现3D动画,除了大大增强了创作的多样性以外,对于企业而言,H5可以有更多的应用可能性,比如说3D商品的展示,3D室内地图等等,由于目前手机端3D动画的H5还比较少见,对于品牌推广而言,也会是一个爆发点。
另外,今年如果微信推出应用号,大幅提高生产效率的H5工具必将给工具的早期用户带来巨大的红利,大批的创业者可能会从工具用户里诞生。所以大家要抓住风口,成为那只最早飞起来的...
这种三维动画到底是怎么做出来的?
首先,你得在电脑上用谷歌浏览器,登录PC端网站www.ih5.cn,制作过程如下:
如果你对怎么制作更感兴趣的话,可以进入教程页面进行学习(内附试用高级账号与密码):http://mp.weixin.qq.com/s?__biz=MzI0NjA2NDI2MA==&mid=402274134&idx=1&sn=288bbe91f292c6bfe435af458ee86d2f#rd
【教程目录】
1.1 3D动画原理——屏幕里的世界
1.2 基于Web的 3D技术简介
1.3 制作一个可控制移动的立方体
1.4 制作一个3D微官网
1.5 制作一个创意3D动画
*请认真填写需求信息,我们会在24小时内与您取得联系。