65.9K
CodeProject 正在变化。 阅读更多。
Home

HTML5 & CSS3 新手指南 - 第五部分（共 12 部分）

James Jensen
starIconstarIconstarIconstarIconstarIcon

5.00/5 (7投票s)

2014年4月14日

CPOL

15分钟阅读

viewsIcon

22797

downloadIcon

444

HTML5 & CSS3 进阶

在本系列的前一篇文章中，我们根据草图创建了一个简单的网页，并使用了 CSS 定义使其看起来很棒。在本文中，我们将探讨 HTML5 带来的一些特殊的视觉和听觉功能。

  1. 设置环境
  2. 使用 HTML5 音频和视频元素
  3. CSS3 文本效果
  4. CSS3 2D 和 3D 变换
  5. CSS3 过渡
  6. CSS3 兼容性回顾
  7. CSS3 动画

本文将使用的文件 可以在这里找到

Zip 文件内容

  • __animate_simple.html
  • __animation_3D.html
  • __music.html
  • __transforms.html
  • __transition.html
  • __video.html
  • electro-interlude.mp3
  • electro-interlude.ogg
  • somepicture.png
  • vanity_template.html

设置环境

在本节的上方，文章提供了我们将用于本系列一部分的文件链接。将这些文件解压缩到您的工作目录中。

由于我们现在将为您的个性化网站创建多个页面，因此我们应该在导航部分添加链接。以下代码显示了使用贯穿本系列其余部分的命名方案创建的链接

    ...
    <ul>
        <li><a alt="My Story" href="MyStory.html">My Story</a></li>
        <li><a alt="Links" href="Links.html">Links</a></li>
        <li><a alt="Music" href="Music.html">Music</a></li>
        <li><a alt="Video" href="Video.html">Video</a></li>
    </ul>
    ...
如果您没有将完成的代码解压缩到您的工作目录中，请在继续之前在 vanity_template.html 中进行这些修改。

复制 vanity_template.html 并将新文件重命名为 music.html。另一个好做法是更改页面标题文本为“Music”或您喜欢的任何内容。

同样，您可以轻松地删除音乐和视频文件名开头的下划线，并将它们用作您的工作示例。这完全取决于您以及您想如何进行。

我们现在准备好了。

使用 HTML5 音频和视频元素

音频

在过去版本的浏览器中，音频和视频功能必须通过插件才能体验。HTML 没有原生的查看媒体（除了静态图像）的功能。JavaScript 代码通过提供一些有限的动画改变了这种情况，但用户需要 Flash 等插件才能观看实际视频或收听音乐。

有了 HTML5，这种情况已经改变。HTML5 提供了两个原生元素，设计者可以用来将视频和音频带给大众。

<video></video>
<audio></audio>
<source></source>

每个元素都使用全局属性。source 元素是 video 和 audio 元素的子元素，如果 video 和 audio 元素中的 src 属性未使用，则应使用它。加载视频和音频的方法是相似的。

<!-- Samples of Audio and Video -->
<video controls>
    <source src="mymovie.ogg" type="video/ogg"/> 
    <source src="mymovie.mp4" type="video/mp4"/> 
    <p>Your browser does not support the VIDEO element</p> 
</video>
<audio controls autoplay loop>
    <source src="music.ogg" type="audio/ogg" /> 
    <source src="music.mp3" type="audio/mpeg" /> 
    <p>Your browser does not support the AUDIO element </p> 
</audio>

上面只是您在页面中添加这些元素之一时所能做的事情的示例。下面将展示对这些元素的一些属性的解释。

  • controls: 当此属性存在时，会在页面上显示控件。
  • autoplay: 加载控件时自动开始播放音频或视频。
  • loop: 以连续循环方式播放视频或音频。

我们将通过将音频元素放入内容区域中，在 header 结束标签和 footer 开始标签之间，来向 Music 页面添加一个音频元素。您可以通过使用 main 元素作为容器来表示 HTML5 页面的主要内容。

main 元素在每个页面中只能使用一次。它是一个块级元素，因此您可以更改其位置、边框等。但是，由于 W3C 的意图是使用 main 元素作为表示主要内容的方式，因此我们应该只以这种方式使用它，而不进行任何布局或渲染技巧。

    <main>
        ...  <!-- plain vanilla main with no funky CSS stuff -->
    </main>

为了遵循 HTML5 的传统，我们将内容构建为一系列 article，可以选择按 section 分组。当然，W3C 很贴心地为我们提供了元素。

<section></section>
<article></article>

section 和 article 元素为您的 HTML5 文档提供了一种很好的方式来定义内容组织，主要是通过在网页的指定区域中列出或堆叠的项目。在我们的 Music.html 文件中，这可以这样完成。

    ...
    </nav>
    <main>
        <h2>Music</h2>
        <article>
            <audio controls>
                <source src="electro-interlude.ogg" type="audio/ogg" />
                <source src="electro-interlude.mp3" type="audio/mpeg" />
            </audio>
        </article>
    </main>
    <footer>
    ...

音乐文件包含在本文章开头提到的存档中。确保您已将它们解压缩到 HTML5 文档所在的目录中，然后将文档加载到浏览器中。如果您的浏览器支持 HTML5 音频元素，您应该会看到这个。

通常没有必要总是需要两种或多种音频格式，除非您想提供不同质量级别的音频，并从最好到最差的顺序排列您的 source 标签。由于包含的音乐文件非常相似，随意听众将无法分辨 OGG 文件还是 MP3 文件是实际播放的那个。

顺便说一句，如果您的浏览器在音频控件下方显示一堆文本，请不要担心。该文本是下面 文本效果 部分的一部分。

视频

将视频集成到您的 HTML5 文档中与音频一样简单。

    ...
    <style type="text/css">
        ...
        video {
            width: 300px;
        }
    </style>
    ...
    <main>
        <h2>Video</h2>
        <article>
            <h4>The Electric Penguin</h4>
            <video controls>
                <source src="http://www.jjensen2.com/assets/electric-penguin.ogv" type="video/ogg" />
                <source src="http://www.jjensen2.com/assets/electric-penguin.mp3" type="video/mpeg" />
                <p>Your browser does not support HTML5 video.</p>
            </video>
        </article>
    </main>
    ...

视频不是包含在本文章的下载中，而是从远程源流式传输。但是，与音频一样，视频的代码显示了文件的两个来源：一个是 OGG 格式，另一个是 MP4。

随附的文件 Video.html 包含上面示例的所有代码，并且应该像您在图片中看到的那样呈现。

一个正在考虑中的很酷的功能是显示字幕和隐藏字幕的能力。当谈到实现时，这将是一个受欢迎的功能，特别是对于希望拥有全球受众并提供指定语言字幕的网页设计师来说。

CSS3 文本效果

文本效果包括

  • 处理文本中的空白
  • 字母或单词之间的间距
  • 创建阴影或轮廓

处理文本中的空白

默认情况下，空白会沿着文本方向向后折叠。（例如，英语的文本方向是 LTR，阿拉伯语是 RTL）。所以，文本在 HTML5 文档中看起来像这样

    Words           with        big     spacing.

将渲染成这样

    Words with big spacing.

CSS 中处理空白的方式是通过 white-space 属性。以下是可能的值及其含义。

normal: 这是默认值。正常渲染会折叠空白，并忽略 HTML5 文档中的换行符，在页面容器的末尾换行。

pre: 这会保留 HTML5 文档中的空白。文档中的所有空格、制表符和换行符都会被尊重。文本在浏览器中不会换行。

pre-wrap: 这会保留空白，就像 pre 一样，但它允许文本在容器或窗口的末尾换行。

pre-line: 这会折叠所有空白，就像 normal 一样，但它会尊重文档中的换行符。

nowrap: nowrap 值将限制任何换行，将文本保持在一行中。它还会折叠所有空白。

为了看到这个效果，将以下 lorem ipsum 文本段落复制到音频元素结束标签下方的文档中。我们将假装这是音乐的描述。

如果您使用的是随附的 __music.html 文件，文本已到位。

                <p>
        Lorem ipsum dolor    sit amet, 
        consectetur adipiscing elit. 
        Integer nec odio.  Praesent libero. Sed cursus ante dapibus 
        diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. 
        Duis      sagittis ipsum. Praesent mauris. Fusce nec tellus 
        sed augue    semper porta.
         Mauris massa. 
         Vestibulum lacinia 
        arcu eget     nulla. Class aptent taciti sociosqu ad litora 
        torquent per        conubia nostra, per inceptos himenaeos.
                </p>

复制时务必保留所有空格，包括前面的制表符。在狭窄的浏览器窗口中，您将看到如下渲染效果。

请注意所有空白都已折叠。每行文本都从窗口的左边缘开始。这是默认行为。现在我们将向段落元素添加一个名为“spacetest”的 class 属性，并为此 class 创建一个 CSS 规则。

    .spacetest {
        white-space: pre;
    }
    ...
    <p class="spacetest">
        ...
    </p>

请注意，“pre”的值完全保留了文档中的空白。现在我们将其更改为“pre-wrap”。

    white-space: pre-wrap;

这就是“pre-line”的效果。

    white-space: pre-line;

这就是“nowrap”的截图。正是您所期望的。

    white-space: nowrap;

字母或单词之间的间距

CSS 为我们提供了两个属性来改变单词和字母之间的间距（字距调整）：word-spacing 和 letter-spacing。 这些属性的值可以是“normal”或一个测量值，该测量值可以是正数或负数。负值会移除间距，正值会在字体正常间距的基础上增加间距。

值可以这样测量（“2”是一个任意值）

    2px   - Pixels
    2em   - Font-relative unit
    2ch   - Number of characters (font-relative)

以下是当您移除单词和字母之间的间距时可能发生的情况。用以下内容替换 spacetest 类的 CSS 定义，并刷新浏览器。

    .spacetest {
        white-space: pre;
        word-spacing: -4px;      /* shrink space between words                 */
        letter-spacing: -0.15ch; /* shrink kerning by 15 100ths of a character */
    }

创建阴影或轮廓

老派网页设计师通过图形应用程序或 div 层来创建文本下方的阴影。使用 CSS，我们可以使用名为 text-shadow 的属性来创建阴影甚至轮廓。此属性的格式如下。

    text-shadow: X-offset Y-offset Blur-Radius Color, {additional shadows...} ;

X 和 Y 偏移值从文本的左上角开始。因此，正偏移向下并向右。模糊半径表示阴影模糊的像素数。省略此值时，模糊半径默认为零（无模糊）。颜色也可以包含 alpha 值。以下是一些示例及其对您的练习网站标题的影响。

    /* ------------------------------- */
    /*   Deep shadowy gray             */
    /* ------------------------------- */
    text-shadow: 4px 6px 3px #888;     
    /* ------------------------------- */
    /*   Blue and orange shadow        */
    /* ------------------------------- */
    text-shadow: 2px 2px 2px darkblue, 3px 3px 2px orange;
    /* ------------------------------- */
    /*   Maroon with no blur           */
    /* ------------------------------- */
    text-shadow: 3px 4px maroon;       
    /* ------------------------------- */
    /*   Yellow glow                   */
    /* ------------------------------- */
    text-shadow: 
        -2px -2px 4px yellow, 
         2px  2px 4px yellow, 
        -2px  2px 4px yellow, 
         2px -2px 4px yellow;
    /* ------------------------------- */
    /*   Bold cyan outline             */
    /* ------------------------------- */
    text-shadow: 
        -1px -1px lightcyan, 
         1px  1px lightcyan, 
        -1px  1px lightcyan, 
         1px -1px lightcyan;
    /* ------------------------------- */
    /*   Very faint white backlight    */
    /*   Needs darker background       */
    /* ------------------------------- */
    text-shadow: 0 0 6px white;

最后，这是让文本看起来像在燃烧的方法。

    /* ------------------------------- */
    /*   Burning the words up          */
    /* ------------------------------- */
    text-shadow: 
         0px    -2px   2px  yellow, 
        -2px    -4px   4px  yellow, 
        -4px    -6px   6px  orange, 
        -6px    -8px   8px  orange,
        -8px    -10px  10px red,
        -10px   -12px  12px red,
        -12px   -14px  14px black;

Webkit 用户代理支持的另一个文本属性是“\ -webkit-text-stroke”。它似乎仅适用于 Chrome（在版本 34.0.1847.116 m 上测试）和 Opera（版本 20.0.1387.91）。

    -webkit-text-stroke: {color} {width}

您可以随意使用上面显示的任何示例来装饰标题文本。它可以用于此目的。zip 文件中的代码使用了上面显示的第一个示例。

CSS3 2D 和 3D 变换

CSS 变换会改变 CSS 盒子的形状或位置，并根据需要变形内容。变换通过一个名为 transform 的属性来执行。此属性的格式很简单。

    transform: transform-action1 | transform-action2 | ... transform-actionN

transform 操作包含一组 2 维变换，以及它们在 3 维变换中的对应项。通常，我们有 translate、scale、rotate 和 skew（perspective）类型的操作。

transform: none
/* ------------------------------------------------------ */
transform: translate(x, y)
transform: translateX(value)
transform: translateY(value)
transform: scale(x, y)
transform: scaleX(value)
transform: scaleY(value)
transform: rotate(angular-value)
transform: matrix(value1, value2, ... valueN)
transform: skewX(angular-value)
transform: skewY(angular-value)
/* ------------------------------------------------------ */
transform: translate3d(x, y, z)
transform: translateZ(value)
transform: scale3d(x, y, z)
transform: scaleZ(value)
transform: rotate3d(x, y, z, angular-value)
transform: rotateX(angular-value)
transform: rotateY(angular-value)
transform: rotateZ(angular-value)
transform: matrix3d(value1, value2, value3 ... valueN)
transform: perspective(value)

值为“none”会移除所有变换。其他值执行特定任务。

Translate 操作会调整元素的位置。

Scale 操作会改变元素的大小。

Rotate 操作会围绕轴旋转元素。

Skew 和 perspective 操作会沿边缘拉伸元素。

Matrix 操作会执行以上所有操作，并且通常不会手动编码。如果您真的想尝试，在线工具有可能提供帮助。

平移

Translation 是移动。当我们平移一个元素时，我们就会移动它。非常简单。

zip 文件中的 __transforms.html 文件包含了我们变换示例的基础代码。如果我们注释掉最后四个 div 元素，您可以在浏览器中加载该文件，并看到两个堆叠的 div，没有任何变换。

在 blocky-2 类的 CSS 定义中输入一个变换，您将看到 translate 函数对 div 的作用。

    ... 
    .blocky-2 { transform: translate(110px, 10px); }
    ...

好的。我们可以用 top 和 left 属性做同样的事情，对吧？嗯，变换规则允许我们在创建过渡时进行动画，这将在下一节中介绍。现在，我们可以先玩玩位置。

Scale 和 Rotate

让我们向同一个定义添加其他变换函数，看看它会产生什么效果。

    ... 
    .blocky-2 { transform: translate(110px, 10px) rotate(30deg) scale(0.75); } 
    ...

这里我们添加了 rotate 和 scale，这使得 block #2 围绕其中心旋转 30 度，然后将其缩小到原始尺寸的 75%。我们在这里使用的单位很重要。虽然 translate 函数接受几种不同类型的线性测量单位，但 rotate 函数接受角度测量，scale 函数接受 相对 单位测量。

  • 角度测量：使用“deg”表示度，“rad”表示弧度。如果您不知道区别，那就只使用 deg，一切都会好起来的。
  • 相对单位：在此，值范围是 0.0 到 1.0 之间的浮点数，其中 1.0 等同于未修改的值，而 0.0 小到无法看到。

倾斜

skew 函数沿着边缘进行拉伸。

    ...
    .blocky-1 { transform: skewX(-0.2rad) translate(20px, 0); }
    .blocky-2 { transform: skewX(30deg) skewY(15deg) translate(150px, 10px) ; }
    ...

在 block 1 上，我们在 x 轴上以负方向将其 skew 了 0.2 弧度。在 block 2 上，我们在 x 和 y 轴上都对其进行了 skew。

Skewing 可能有点难以理解，因为我们需要使用角度单位来进行线性变化。基本上，skewing 的工作原理如下。

当我们进行 skew 时，我们将一个角度标记为参数。然后，我们将相应的边缘沿给定方向移动。正角度测量对于 skewY 是顺时针方向，对于 skewX 是逆时针方向。在图中，skewY 测量的原点来自 x 轴所在的直线，skewX 的原点来自 y 轴所在的直线。

如果您希望右侧向上倾斜，请使用 skewY 并带有负角度。

如果您希望底部向右移动，请使用 skewX 并带有正角度。

该图还显示了当每个轴变换的参数为 -30 度时，box 将如何 skew。另请注意，+60 度的测量值超出了元素的尺寸。另外值得一提的是，（+/-）90 度的 skew 测量值会渲染成一条不可见的线。

3 维变换

3 维对象的变换遵循与 2 维对象（元素）相同的原理。不同之处在于 3D 变换函数最适合处理一组变换为 3 维对象面的元素。

    #cube .front  { transform: rotateY(  0deg) translateZ( 100px ); }
    #cube .back   { transform: rotateY(180deg) translateZ( 100px ); }
    #cube .right  { transform: rotateX( 90deg) translateZ( 100px ); }
    #cube .left   { transform: rotateX(-90deg) translateZ( 100px ); }
    #cube .top    { transform: rotateY( 90deg) translateZ( 100px ); }
    #cube .bottom { transform: rotateY(-90deg) translateZ( 100px ); }

想象一下，您定义了 6 个名为“front”、“back”等的 div 元素，就像上面的代码示例一样。上面的代码会旋转和平移这些 div 元素以形成一个立方体。

许多此类模型都是可能的，但创建它们的代码可能会非常复杂。

CSS3 过渡

翘曲我们的元素是可以的，但不是非常有用的。毕竟，如果我们需要在特定位置显示某些内容，我们可以直接设置 top 和 left 属性就完成了。因此，变换有助于实现另一个 CSS 功能，并且确实如此。

Transitions 是描述 CSS 状态应如何从一个值变为另一个值的说明。例如，当一个元素从一个类名更改为另一个类名时，两个类名之间的差异可以根据 transition 属性中的值进行 transition。

JavaScript 通常用于更改类名，但 CSS 提供了一个方便的伪类，称为“:hover”。当鼠标悬停在元素上时，此伪类包含该元素的 CSS 定义。为了演示，我们将创建一个具有初始 CSS 状态和具有不同状态的 :hover 定义的 div。

    ...
    <style>
        .spinner {
            width: 60px;
            height: 60px;
            border: 1px solid green;
            background-color: green;
            -webkit-transition: -webkit-transform 2s, width 2s, 
                                height 2s, background-color 2s;
              -msie-transition:   -msie-transform 2s, width 2s,
                                height 2s, background-color 2s;
               -moz-transition:    -moz-transform 2s, width 2s, 
                                height 2s, background-color 2s;
                 -o-transition:      -o-transform 2s, width 2s, 
                                height 2s, background-color 2s;
                    transition:         transform 2s, width 2s, 
                                height 2s, background-color 2s;
        }
        .spinner:hover {
            width: 100px;
            height: 100px;
            background-color: red;
            -webkit-transform: rotate(-90deg);
              -msie-transform: rotate(-90deg);
               -moz-transform: rotate(-90deg);
                 -o-transform: rotate(-90deg);
                    transform: rotate(-90deg);
        }
    </style>
    ...
    <body>
        <div class="spinner" id="trans1"></div>
    </body>

复制上面的代码并粘贴到您自己的文档中，或加载 zip 文件中的 __transition.html 文件以查看过渡效果。当您将鼠标移到绿色框上时，它会旋转、调整大小并改变颜色。移开鼠标会撤消过渡。

CSS3 兼容性回顾

您可能已经注意到，过渡和变换会与其他定义一起重复，这些定义前面带有“-webkit-”等前缀。每个用户代理（UA）倾向于以自己的方式来采用新的 CSS 属性，直到 W3C 最终确定其建议。网页开发者的工作是尽可能兼容更多的 UA，以便他们的网页能在尽可能多的机器上正常运行。

在本教程中，文章将不再使用特定于 UA 的前缀，而只显示基本属性名称。

如果您想知道，以下是每个前缀及其所代表的用户代理的列表。

  • -webkit- : Chrome/Safari 引擎
  • -msie- : IE 9 及更早版本
  • -moz- : Firefox
  • -o- : Opera 的 Presto 引擎

在 CSS 文档中拥有多个定义不会造成任何危害。用户代理会忽略它们不识别的属性。

IE 11

显然，IE 11 更改了其 UA 标识，并且似乎不支持几个变换属性。有一种方法可以让 IE 11 进行旋转和平移，但您必须使用其专有属性 filter。本文不涉及 filter 属性的使用。

CSS3 动画

CSS 简写属性 animation 及其同类属性控制动画过渡，通常无需用户交互。动画有几种可用属性，但本文只介绍其中两种。

    animation {name} {duration} {timing-function} {iteration-count}
    @keyframes  { {transitions} }

动画要播放，@keyframes 规则是必需的。让我们来看一个简单的动画，该动画将一个 div 从左到右来回振荡。

         ...
        <style type="text/css">
            ...
            .slider-ease {
                animation: divmove 4s ease infinite;
            }
            ...
            @keyframes divmove {
                0% { transform: translate(0px,0px); }
                50% { transform: translate(300px, 0px); }
                100% { transform: translate(0px,0px); }
            }
            ...
        </style>
    </head>
    <body>
        <div class="slider-ease">ease</div>
        ...
    </body>

加载 __animate_simple.html 文件以查看此效果。请注意，该文件为五种计时函数提供了一个示例 div，以便您可以比较它们的工作方式。

animation: 动画的名称是“divmove”。这会将动画与具有相同名称的关键帧连接起来。我们希望动画持续两秒钟。我们使用一种称为“ease”的计时函数，并且我们希望它永远迭代。

@keyframes: 我们有三个关键帧。第一个是起始点。它不是必需的，但存在以演示定义初始帧的能力。还有另外两个关键帧，一个在 50%，另一个在 100%。50% 的变换告诉浏览器将 div 向右移动 300 像素。100% 关键帧处的变换将 div 放回原点。

以下是一些当前可用的计时函数。

  • ease : 加速和减速平滑。
  • ease-in : 加速平滑，结束 abrupt。
  • ease-out : 起始 abrupt，减速平滑。
  • ease-in-out : 比 ease 加速和减速更短，但在中间更快。
  • linear : 静态速度。

3 维动画

3 维对象的动画使用上一节中列出的 3D 变换属性，以及上面演示的动画和关键帧功能。

将 __animation_3D.html 文件加载到您的浏览器中。它演示了一个围绕假想轴缓慢旋转的动画立方体。概念并不难，只是编码很繁琐。

文档创建一个名为“cube”的 div。在 cube 内部，定义并变换立方体的侧面，形成一个 6 面体。动画会旋转 cube div，而不是单独的侧面。但是，因为 cube div 包含侧面，所以它们会以与 cube div 相同的方式旋转。

这就像把一个物体放进一个玻璃盒子里并把它粘在原位，然后旋转盒子，看起来就像物体本身在旋转一样。

摘要

本文演示了许多花哨的 CSS 功能。除了学习如何将音频和视频集成到您的网站中，本文还演示了许多用于装饰文本、重新定位或变形元素以及集成简单动画的 CSS 属性。

本系列中的其他文章

历史

2014-04-14: 初始发布

© . All rights reserved.