UI设计|响应式网站和H5动画

时间：2023-09-14 19:24:01 | 来源：网站运营

时间：2023-09-14 19:24:01 来源：网站运营

UI设计|响应式网站和H5动画：标准通用标记语言下的一个应用HTML标准自1999年12月发布HTML 4.01后,后继的HTML 5

和其他标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫

作"Web Hypertext Application Technology Working Group（Web超文本应用技术工作

组-WHATWG） ”的组织。

WHATWG致力于Web表单和应用程序，而W3C [World Wide Web Consortium （万维网

联盟）]专注于XHTML 2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML。

HTML 5草案的前身名为Web Applications 1.0,于2004年被WHATWG提出，于2007年被

W3C接纳，并成立了新的HTML工作团队。

1.1 HTML5的3个优势

HTML5的发展史，如图8.1所示。




1.多设备跨平台

用HTML 5的优点主要在于，这个技术可以跨平台使用。比如你开发了一款HTML 5的游戏，

你可以很轻易地将其移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可

以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，这也是

大多数人对HTML5有兴趣的主要原因。

2.自适应网页设计

很早就有人设想，能不能“一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，

根据屏幕宽度，自动调整布局（Layout）。2010年，Ethan Marcotte提出了 “自适应网页设

计"这个名词，指可以自动识别屏幕宽度，并做出相应调整的网页设计。

这就解决了一种传统的局面——网站为不同的设备提供不同的网页，比如专门提供一个

Mobile版本，或者iPhone/iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好

几个版本，而且如果一个网站有多个Portal （入口），会大大增加架构设计的复杂度。

而HTML 5的媒体查询功能很好地解决了一套代码、一套资源和数据库，根据不同屏幕分辨率

响应，输出适配布局合理美观的页面。

3.即时更新

游戏客户端每次都要更新，很麻烦；而更新HTML 5游戏就好像更新页面一样，即时更新。

一套代码响应多个分辨率。

1.2 HTML 5八大特性

1.语义特性(Class:Semantic)

HTML5 M予网页更好的意义和结构。

2.本地存储特性(Class:Offline & Storage)

基于HTML 5开发的网页APP拥有更短的启动时间、更快的联网速度，这些全得益于HTML 5

APP Cache,以及本地存储功能。

3.设备兼容特性(Class:Device Access)

HTML 5提供了前所未有的数据与应用接入开放接口。使外部应用可以与浏览器内部的数据直

接相连，例如视频影音可直接与Microphones及摄像头相连。

4.连接特性(Class:Connectivity)

更有效的连接工作效率，使得基于页面的实时聊天、更快速的网页游戏体验、更优化的在线交

流得到了实现。HTML5拥有更有效的服务器推送技术。

5.网页多媒体特性(Class:Multimedia)

支持网页端的Audio、Video等多媒体功能，与网站自带的APPS、摄像头、影音功能相得益

影。

6.三维、图形及特效特性(Class:3D、Graphics&Effects)

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于浏览器所呈现的惊人视觉效

果。

7.性能与集成特性(Class:Performance&lntegration)

没有用户会永远等待你的Loading, HTML 5会通过XMLHttpRequest2等技术，帮助开发者的

Web应用和网站在多样化的环境中更快速地工作。

8.CSS3 特性(Class:CSS3)

在不牺牲性能和语义结构的前提下，CSS3提供了更多的风格和更强的效果。此外，较之以前

的Web排版，Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。

1.3 HTML 5的应用及布局方式

海外HTML 5被用在响应式网站，或社交网站广告条及移动设备广告上，中国HTML 5被用在

移动互联网广告、APP的闪屏、活动推广、微信、小游戏等方面。

HTML 5与传统div的语义架构，如图8.2所示。

传统div+CSS页面布局方式，如图8.3所示。










对于HTML 5布局方式，为什么我们需要网格布局？

在我们的Web内容中，可以将其分割成很多个内容块，而这些内容块都占据自己的区域

（Regions）,可以将这些区域想像成一个虚拟的网格。网格布局特性主要是针对Web应用程

序的开发者，可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空

间，或者定义它们的大小、位置及层级。

所谓网格设计，就是把页面按照等比分成等分格子，然后所有元素按照最小单位的倍数尺寸来

设计，以便于后期前端排版有规律、定位好算、网页看起来规整、适合响应式多分辨率适配、

适合大型动态网站布局、CSS更好写。

网格布局，如图8.4所示。

1.4 CSS3视觉表现方面的新特性

1.半透明rgba属性

在rgba出现之前，半透明可以用opacity来创建，可是这样导致的结果是不仅元素的背景会变

透明，标签元素包含的文字也会变透明。

2.Background-image (多背景图)

以前Backround-image只支持一个图片，现在可以支持多个图片，只要把它们用逗号隔开就

行了，格式如下。

background:

[background-image] [background-position] [background-repeat],

[background-image] [background-position] [background-repeat],

[background-image] [background-position] [background-repeat];

3.Border-image (边框图片)

Border-image主要是用图片来填充边框。

Border-image的分解属性如下。

(1)border-image-source 指定 border 的背景图的 url。

(2)border-image-slice设置图片如何切割的属性，非定位。

(3)border-image-width 定义 border-image 的显示区域。

(4)border-image-repeat 定义 border-image 的重复方式。

(5)[stretch | repeat | round]:拉伸 | 重复 | 平铺(其中 stretch 是默认值)。

边框图片用例如图8.5所示。




图8.5




4.圆角

border-radius: 90px 以半径为 90px 的圆。

除了可以同时设置4个圆角以外，还可以单独对每个角进行设置。CSS3提供四个单独的属性对

应4个角。

(1)* border-top-left-radius： 125px。

(2)* border-top-right-radius: 125px。

(3)* border-bottom-right-radius: 125px。

(4)* border-bottom-left-radius: 125px。

border-radius可以同时设置1 ~ 4个值。如果设置1个值，表示4个圆角都使用这个值：如果

设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。

如果设置3个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三

个值：如果设置4个值，则依次对应左上角、右上角、右下角、左下角(顺时针顺序)如图8.6所

示。

(1) border-radius： 125px。

(2) border-radius： 125px60px。

(3) border-radius： 125px90px45px。

(4) border-radius： 125px 90px 45px 5px。

5. box-shadow和text-shadow (盒子阴影)和(文字阴影)

text-shadow和box-shadow都有4个参数。第一个为水平偏移量；第二个为垂直偏移量；第

三个为模糊的像素宽度；第四个为颜色(可用rgba颜色)，如图8.7所示。







文字阴影

如:text-shadow:5px 3px 4px rgba(0,0,0,0.7)。

意思是说，阴影部分向右偏移5px、向下偏移3px、模糊宽度为4px、颜色为黑色,并且不透明

度为0.7,效果如图8.8所示。

6.强大的CSS选择器

E:hover{}等做各种元素状态，如图8.9所示。

7.transform （变换）

值得注意的有3个选项：skew、rotate和scale,如图8.10所示。













(1)skew。定义沿着X轴和F•轴的2D倾斜转换，如图8.11所示。

(2)接下来是rotate。rotate接受一个旋转的角度，如图8.12所示。

(3)scale。定义2D缩放转换。接受两个值的时候是分别缩放宽度和高度，接受一个值的时候，

高度和宽度都根据该值缩放，如图8.13所示。







8. SVG图像使用

参数为 <img src="ICONl.svgH width="600M height=H600M alt=“”> 的图如图 8.14

所示。







9.transition （过渡）

transition可以实现非常平滑的过渡，最重要的用法就是伪类用法，以前的hover伪类只能实

现“瞬间”的变化，有的transition之后，可以实现平滑的过渡。可以设置4个过渡属性。

（1）transition-property□这个属性是设置需要过渡的属性，如color、width等，默认为all,

即所有属性都过渡。

（2）transition-durationo 过渡所需的时间。

（3）transition-timing-fiinctiono 过渡方式：ease （匀速）、ease-in （加速）、ease-

out （减速）、ease-in-out （先加速再减速）。

（4）transition-delayo过渡发生的延迟。各种过渡效果如图8.15所示。







10.animation （动画）

HTML 5增加了 animation （动画）的属性，这个属性比transition （过渡）能更加细腻地控

制动画的时间和关键帧时间位置，支持在一个元素上做时间和行为复杂的动画如图8.16所示。

动画的主要属性如下。

（1）animation-name。名字,关于后续的关键帧的定义。

（2）animation-durationo。动画时间。

(3) animation-iteration-counto。动画次数，可为数字和 infinite (无限次)。

(4) animation-timing-fiinctiono 。动画方式，和 transition—样。








11. 3D Canvas 画布

HTML Canvas （画布）能够帮助你更加方便地实现2D绘制图形图像及其各种动画效果。

我们可以在HTML中使用属性width和height来定义Canvas。

但是Canvas的相关功能主要依赖于Javascript实现，即HTML 5 Canvas API。

我们使用javascript来访问和控制Canvas相关的区域，比如调用相关绘图的方法，用来动态生

成需要的动画或者图形，如图8.17所示。