通过实例深入理解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(13) views8897 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 3D感知和建模关键硬件技术:双目、3D结构光和TOF

    无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...

  • 常用光照类型基本概念工作原理及其计算公式

    在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的...

  • Monaco Editor 编辑器拷贝粘贴功能调用和获取选中文本

    有时候需要在monaco editor外部调用编辑器的内置功能比如希望在页面主工具栏实现一些快捷操作。button

  • React JSX语法简介

    JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...

  • 深入理解JS和CSS3动画性能问题和技术选择

    本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了...

  • 如何使用Three.js加载obj和mtl文件

    OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...

  • Three.js入门教程6 - 创建全景图和纹理

    全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...

  • D3.js读取外部json数据

    D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...

  • inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...

  • 如何使用CSS3实现一个平滑的3D文本标题

    要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...

  • 如何使用CSS3/SCSS实现逼真的车窗雨滴效果

    在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop

  • 更多...