通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

techbrood 发表于 2016-11-06 00:15:47

标签: html5, css3, svg, webgl

- +

常常听到人们对于HTML5的讨论,看了页面头部这个那个就是HTML5,误认为HTML5只是新增些标签“而已”,学完了W3School似乎就理解了。实际上很多从业人员并不理解业界为什么要推出HTML5系列技术标准,为什么HTML5代表了下一代网页技术。这里我们通过实际的例子来说明HTML5不是想象中的那么单薄,而是一本厚厚的需要长期学习的长篇巨著,HTML5甚至使得技术含量的天平在从后端向前端工程师倾斜。(这里且忽略websocket/webworker这类偏幕后的内容)。

HTML5

HTML5不只是简化了协议声明(标签语法),添加了若干标签和API,其核心目标是把网页变成富媒体,最重要的就是给了你随心所欲的画布(canvas),Web再也不是枯燥的文本内容和使用JS制作的简单DOM变化效果,前端工程师利用数学知识可以成为网页魔法师(艺术家)。


CSS3

CSS3的核心改变在于引入了动画和特效,再也不是静态的样式,你可以利用filter、animation、gradient、shadow、blend制作出PS都做不出来的电子艺术!你可以撇开PS来制作动态的特效!CSS3还有一个重要特性是媒体查询,用来支持响应式设计。

SVG

SVG的核心是几何图形,为网页引入了矢量图,通过矢量图的操作,可以实现很棒的变形动画特效。

SVG已经15岁了,只不过在HTML5里面用起来更方便,和CSS3的交互也更方便。

注意SVG的动画部分行将废弃,将使用统一的Web Animation API来代替。

WebGL

WebGL的核心很简单,就是把网页从2D变成3D展示和交互。(CSS3也有3D效果,但是WebGL是硬件加速的!)

ReactJS/AngularJS等框架

大公司的前端工程化工具,通过组件化规范化的方式试图“简化”Web编程,但需要提醒的是大公司工具往往是小团队的坑。

在用户需求更为灵活和个性化的中小项目市场,关注HTML5和创意设计本身可能要更为重要。

possitive(8) views7545 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 踏得网精选2016年度10大最佳HTML5动画

    踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...

  • WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解

    我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...

  • Three.js入门教程2 - 着色器(下)

    这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程。

  • Three.js入门教程2 - 着色器(上)

    之前我已经给出了一篇

  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...

  • WebGL入门教程1 - 3D绘图基础知识

    现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • 使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解

    要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。你可能已经使用了这些方...

  • Three.js 3D打印数据模型文件(.STL)加载

    3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • 使用CSS3实现流星雨动画教程

    很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...

  • 更多...