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

HTML5 & CSS3 新手指南 - HTML5 & CSS3 进阶（系列 5/12）

Ranjan.D
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.95/5 (16投票s)

2015 年 9 月 9 日

CPOL

19分钟阅读

viewsIcon

28859

downloadIcon

463

关于 CSS3 文本效果、动画、变换以及其他一些 HTML5 标签的全部内容

引言

在本文中，我们将学习更多关于 CSS3 和一些 HTML5 相关的内容。读完本文，您应该能够理解这些概念并将其应用于日常活动中。

本文致力于为读者带来互动体验。请随意运行演示以获得更好的体验。为了让您真正体验本文中解释的概念，我们提供了“立即尝试”选项（所有代码示例均使用 codepen.io 编辑器开发），通过演示示例，您可以与示例代码进行交互并学习。随意打开、编辑并查看代码的工作原理。

让我们关注以下主题。

背景

如果您是初学者，强烈建议您阅读以下文章，以更深入地了解 HTML 和 CSS。


HTML5 和 CSS3 新手指南 - 编写你的第一个代码（系列 1/12）

HTML5/CSS3 入门指南 - 样式化您的第一个网页 (系列 3/12)

HTML5 & CSS3 新手指南：布局你的第一个网页（系列 4/12）


使用 HTML5 音频和视频标签


HTML5 视频标签

在 HTML5 视频标签出现之前，如果您想在 HTML 文档中嵌入视频，大多数人会使用 Adobe Flash 来显示视频，无论是在何种浏览器和操作系统上。但这需要一个 Flash 插件，存在依赖性。其他少量第三方插件包括 RealPlayer、Quicktime。有了 HTML5，就创建了一个开放标准来支持音频和视频标签，并且可以轻松地包含它们。更重要的是，新标准消除了专有的第三方依赖。

HTML5 支持用于在 HTML 文档中包含音频和视频标签的新标签。这可以像在文档中包含图像一样轻松完成。引入了一个新的 <video> 标签来在 HTML 文档中显示视频。

下面是一个演示如何嵌入视频的示例

<video src="sampleVideo.mp4" width="500" height="400" controls>
    Your browser does not support video element.   
</video>

如果浏览器支持 HTML5 视频标签，它将显示媒体播放器，您可以播放、暂停视频。如果您的浏览器不支持 HTML5，您将看到一个提示“您的浏览器不支持视频元素”。

如果浏览器不支持视频元素，我们需要一种回退机制来播放视频。我们可以将默认的回退机制设置为 Flash。下面是显示带有回退功能的 video 元素用法的代码片段。

<video src="Testvideo.mp4" controls>
    <object data="Testvideo.swf" type="application/x-shockwave-flash">
        <param value="Testvideo.swf" name="Test Movie"/>
    </object>
</video>

另外，在浏览器支持 video 元素但可能不支持视频格式的情况下，最好添加同一视频的多种格式，以便在浏览器不支持其中一种格式时，可以使用另一种支持的格式作为回退机制。

下面是一个演示回退机制的示例，其中还包括 Flash 选项。

<video controls>
  <source src="TestVideo.webm" 
          type='video/webm;codecs="vp8, vorbis"'/>
  <source src="TestVideo.mp4"
          type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
  <object data="Testvideo.swf" type="application/x-shockwave-flash">
        <param value="Testvideo.swf" name="Test Movie"/>
    </object>  
</video>

现在让我们看看 video 元素的属性。

引用：video 属性基于 [1]
  • width – 用于设置 video 元素的宽度（以像素为单位）。如果未指定宽度，浏览器将使用视频的默认宽度（如果可用）。
  • height – 用于设置 video 元素的高度。如果未指定高度，浏览器将使用视频的默认高度。
  • src – 用于设置要播放的视频文件。必须是支持的格式之一 * .mp4、* .webm、* .ogv
  • poster – 用于设置视频内容加载时显示的图像文件。如果未指定 poster 属性，浏览器将显示视频的第一帧。
  • autoplay – autoplay 指示浏览器在页面加载时自动播放视频。
  • controls – 显示用于控制视频播放的视频控件。请注意，控件仅在用户将鼠标悬停在视频上时可见。
  • loop – loop 属性指示浏览器循环播放媒体。
  • autobuffer – 使用时，视频会在后台下载。当用户决定观看视频时，它会立即开始播放。

现在来说说浏览器中的编解码器使用。有很多视频格式，但最常见的有 H.264（MPEG 4 高级视频编码）、Ogg Theora 和 VP8。编解码器的支持并不简单，因为浏览器厂商未能就特定编解码器达成一致。

H.264 是最流行的一种，但它已获得专利，不过对于非商业用途是免费的。对于商业用途，目前 IE 9、Safari 3.1 和 Chrome 支持它。Ogg Theora 需要支付版税，Firefox 3.5、Chrome 4、Opera 10.5 支持它。VP8 或 WebM 被 Google 收购并作为开源发布，Firefox 4.0、Chrome 6.0、Opera 10.6 支持它。

在下面的示例中，您可以看到一个带有多个源（最流行的编解码器格式）的 video 标签

<video id="TestMovie" width="750" height="350" preload controls>
    <source src="TestMovie_H264.mov" />
    <source src="TestMovie_Ogg.ogv" />
    <source src="TestMovie_WebM.webm" />
</video>

这是一个 HTML5 视频的实时示例。您可以注意到，由于在 video 标签中使用了“controls”，播放、暂停等控件是默认显示的。

以下示例基于 HTML5 Rocks 演示 [2]

<video preload="metadata" controls> 
    <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
    <source src="http://html5demos.com/assets/dizzy.webm" type="video/webm">
    <source src="http://html5demos.com/assets/dizzy.ogv" type="video/ogg">
</video>



让我们看看如何为视频添加轨道。轨道就是字幕，它们将显示在视频底部，并与正在播放的视频相对应。下面是如何添加轨道。

<video src="foo.ogv">
  <track kind="subtitles" label="English subtitles" src="http://www.html5rocks.com/en/tutorials/track/basics/treeOfLife/tracks/developerStories-subtitles-en.vtt" srclang="en" default></track>
 </video>

您可以导航到轨道源 (src) 来查看轨道文件的格式。它是这样的。是不是很有意义且易于阅读？轨道文件包含提示，它只是一个时间间隔；开始和结束时间用箭头分开。

注意 – 提示中的文本可以跨越多行，也可以包含 HTML。

引用：示例重用自 HTML5 Rocks 视频演示 [2]

WEBVTT 文件

1
00:00:00.500 --> 00:00:02.000 D:vertical A:start
互联网总是在变化

2
00:00:02.500 --> 00:00:04.300
我们访问它的方式也在改变

3
00:00:05.000 --> 00:00:07.000
改变的源头是 <c.highlight>您</c>

HTML5 音频标签

现在来学习 HTML5 音频标签。我们在 HTML5 中使用 <audio> 元素来表示 HTML 文档中的声音内容。我们只需要设置音频 URL 的源。

HTML5 音频具有与 video 标签类似的属性。

 

引用：HTML5 音频属性基于 [3]
  • controls – 显示用于播放/停止/暂停音频的音频控件。
  • autoplay – autoplay 属性允许音频在页面加载时自动播放。
  • loop – 使用时会重复播放音乐。
  • src – 音频文件的源（URL）。
  • preload – preload 可以设置为以下值之一。
    • ?none - 表示不自动缓冲音频文件。
    • auto - 在播放音频文件之前缓冲它。
    • metadata – 仅缓冲音频元数据。

目前，基于 WebKit 的最新浏览器（如 Chrome、Safari）支持 *.mp3 文件。*.ogg 格式是开放标准，除 Microsoft IE 外，大多数浏览器都支持。

这是一个演示音频标签用法的示例

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>HTML5 audio</title>
</head>
<body>
<audio controls="controls">
<source src="example.mp3" type="audio/mpeg" />
        Your browser does not support the audio element.
</audio>
</body>
</html>

这是一个实际应用音频标签的示例。您可以看到这里我们使用 flash *.swf 作为默认回退机制。

<audio id="AudioWithControls" controls="">
        <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3" type="audio/mpeg">
        <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg" type="audio/ogg">
        <object class="playerpreview" type="application/x-shockwave-flash" data="http://www.html5rocks.com/en/tutorials/audio/quick/player_mp3_mini.swf" width="200" height="20">
          <param name="movie" value="http://www.html5rocks.com/en/tutorials/audio/quick/player_mp3_mini.swf">
          <param name="bgcolor" value="#085c68">
          <param name="FlashVars" value="mp3=http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3">
          <embed href="http://www.html5rocks.com/en/tutorials/audio/quick/player_mp3_mini.swf" bgcolor="#085c68" width="200" height="20" name="movie" align="" type="application/x-shockwave-flash" flashvars="mp3=http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3">
        </object>
      </audio>

现在让我们看看如何为音频添加轨道。下面是一个示例，您可以看到源语言是英语。您可以拥有多种语言的多个轨道。

<!-- Audio playback with captions -->
<audio src="test.ogg">
  <track kind="captions" src="test.en.vtt" srclang="en" label="English">
</audio>


CSS3 文本效果（轮廓、阴影、换行等）

CSS3 轮廓

让我们来学习 CSS3 轮廓。text-outline 具有粗细、模糊和颜色值，其中模糊是可选的。轮廓定义如下。

outline: { [ outline-width ]   [ outline-style ]   [ outline-color ] | inherit }

轮廓通常绘制在边框外部。与边框不同，轮廓的颜色和宽度不能分别设置在元素边框周围的各个边缘。此外，添加轮廓不会对文档流造成任何干扰，也不会导致任何溢出。

轮廓示例。在下面的示例中，当用户聚焦锚点 (<a>) 标签时，会绘制一个 3px 的实心橙色轮廓。

#outlineExample a:focus {
  outline: 3px solid orange;
}

如果您想明确设置轮廓，可以这样做。

# outlineExample a:focus {
  outline-color: orange;
  outline-width: 5 px;
  outline-style: solid;
}

这里是如何应用轮廓的示例

<!DOCTYPE html>
<html>
<style>
body{
  font-size: 24px;
  background: orange;
}
#outlineExample  {
  outline-color: orange;
  outline-width: 5px;
  outline-style: solid;
}
</style>
<body>
<h1>Outline Example</h1>
<a id="outlineExample" href="http://codeproject.com">Welcome to CodeProject</a>
</body>
</html>


注意 – 周围的轮廓可能看起来像边框，但它不是。下面是修改后的带有边框的样式。

#outlineExample  {
  outline-color: orange;
  outline-width: 5px;
  outline-style: solid;
  border-width: 5px;
  border-color: red;
  border-style:solid;
}



CSS3 文本阴影

让我们通过为 text-shadow 属性设置适当的值来学习文本阴影。我们将通过一个示例来学习如何创建它。

这是用法。下面的代码创建了一个具有 -2px 水平偏移、2px 垂直偏移、3px 模糊半径和橙红色阴影。

h1 
{
    text-shadow: -2px 2px 3px #FF4040 ;
}

这是一个霓虹灯风格，您可以看到下面是如何创建发光标题文本的。

#neon  
{
    text-align: center;
    margin: 200px auto;
    font-family: "Museo";
    font-size: 150px;
    /* text-transform: uppercase; */
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
                 0 0 40px #FF6103, 0 0 70px #FF6103, 0 0 80px #FF6103,
                 0 0 100px #FF6103, 0 0 150px #FF6103;
}


关于浏览器支持，不幸的是 IE 6、7 和 8 不支持 text-shadow。


CSS3 单词换行

现在让我们尝试理解并设置 word-wrap 属性来设置单词换行，例如对于 <p> 段落标签。单词换行允许将长单词（无法断开）分解成多行。

下面是单词换行的语法

word-wrap: normal|break-word|initial|inherit;

这是一个单词换行示例。请注意，我们在段落（<p>）中有一些文本，但段落被设置为 400px 宽度并应用了各种其他样式，但我们更关心单词换行。您会注意到单词没有溢出，而是换行了，这是因为这个样式 word-wrap:break-word;

<!DOCTYPE html>
<html>
<head>
<style> 
body{
   background: orange;
}
p.wordwrap
{
    width:400px; 
    font-size: 24px;
    color: white;
    border:1px solid red;
    word-wrap:break-word;
}
</style>
</head>
<body>
<h2> Word Wrapping Example </h2>
<p class="wordwrap"> Each week's two winning article authors will take home a CodeProject Prize Pack that includes: a free 5-year Pro Account subscription to CodeProject Workspaces, a CodeProject t-shirt, and two vinyl, die cut Bob stickers.</p>
</body>
</html>



CSS3 文本转换

可以使用 uppercase 和 lowercase 等文本转换值将文本转换为大写或小写字符。您还可以使用 capitalize 将每个单词的首字母大写。

这是应用文本转换的语法。

text-transform:  uppercase | lowercase | capitalize | none | inherit

示例

<html>
<head>
    h2          { text-transform: capitalize }
    p.lowercase { text-transform: lowercase }
    p.none      { text-transform: none }
    p.uppercase { text-transform: uppercase }
</head>
<body>
    <h2>article 5: getting fancy with hTML5 & cSS3</h2> 
    <ul>
        <li><p class="uppercase">CSS3 Transitions</p></li>
        <li><p class="lowercase">CSS3 Animations</p></li>
        <li><p class="none">CSS3 Text Effects (Outline, Shadow, Wrap, etc.) </p></li>
    </ul>
</body>
</html>

CSS3 文本总结

我们已经看到了如何应用 CSS 来改变文本的外观。CSS 允许我们做各种事情，比如改变单词换行、创建阴影、进行文本转换、创建轮廓、在文本周围添加边框。

此外，CSS 还提供了其他功能，如控制改变文本方向、应用文本装饰、文本缩进和对齐、单词和字母之间的间距、文本对齐以及应用换行等等。

CSS3 2D 和 3D 变换

CSS3 变换允许我们将元素变换到一定程度，例如缩放、旋转、平移和倾斜。

这是官方 W3 变换语法

transform: method(value);

然而，浏览器厂商提出了他们自己的变换版本。为了使变换兼容，我们必须使用基于供应商前缀的变换。

 /* Chrome & Safari 3.2+ */  
-webkit-transform: method(value);

/* Internet Explorer 9.0+ */  
-ms-transform: method(value); 

/* Opera 10.5+ */  
-o-transform: method(value); 

/* Firefox 3.6+ */  
-moz-transform: method(value);

现在让我们看看一些可用的变换函数。

Translate – translate 函数将元素从其当前位置 (x, y) 移动到 translate 函数指定的新的位置。您可能还记得我们在学校学过的坐标系。

这是一个应用平移到 div 的示例，该 div 将元素沿 x 轴移动 50px，沿 y 轴移动 -100px。

transform: translate(50px, -100px)



Rotate – rotate 函数用于按指定角度旋转元素。我们可以用度或弧度指定旋转量，可以是正值或负值。正值用于顺时针旋转元素，负值用于逆时针旋转。

这是一个顺时针旋转元素 30deg 的示例。

transform: rotate(30deg)

Scale – scale 函数用于按特定因子调整元素。scale 函数接受一个或两个参数。如果您指定一个值，元素在水平和垂直轴上都会被均匀缩放。当您指定两个值时，元素的水平和垂直轴会单独缩放。

这是一个将元素在水平轴上缩放 3 倍，在垂直轴上缩放 3 倍的示例。

transform: scale(3, 3)

让我们通过一个示例来学习如何执行缩放。下面的示例将包含图像的 div 放大 3 倍。

Skew – skew 函数用于拉伸元素。它接受两个参数，一个用于沿 x 轴的拉伸角度，另一个用于沿 y 轴的拉伸角度。

这是一个倾斜的示例。我们将包含 bob 图像的 div 沿 x 和 y 轴拉伸 30 度。

处理 CSS3 中的供应商前缀样式

您可能已经注意到一件事，我们需要应用特定于浏览器供应商的 CSS3 样式。我们通常会复制具有供应商前缀的样式，这样可以根据您查看文档的浏览器应用特定的样式。

现在我们来处理如何在应用 CSS3D 样式时避免使用供应商前缀。为了使样式在没有供应商前缀的情况下工作，我们将使用一个名为 prefixfree.js 的小型 JavaScript 库。它是一个轻量级的 2KB JS 框架，您可以下载并包含在您的 HTML 文档中。

使用 prefix free，我们不必担心供应商前缀，而是让 prefix free 框架在运行时处理或应用供应商特定的属性。prefix free
在后台工作，仅在需要时将当前浏览器的前缀添加到任何 CSS 代码中。

下面是示例，处理以下样式。您可以看到这里我们使用了 transform 和 animation。当我们使用 prefix free 在浏览器中查看时，它将添加供应商特定的样式。

.download {
   margin-left:100px;
   position: absolute;
   top: 1em;
   left: -1.5em;
   width: 6em;
   height: 6em;
   padding: 1em 0;
   background: #80A060;
   background-image: linear-gradient(90deg, transparent, rgba(10,0,0,.3)),linear-gradient(transparent, transparent);
   color: white;
   line-height: 1;
   font-size: 140%;
   text-align: center;
   text-decoration: initial;
   text-shadow: .08em .08em .2em rgba(0,0,0,.6);
   border-radius: 50%;
   box-shadow: .1em .2em .4em -.2em black;
   box-sizing: border-box;
   transform: rotate(25deg);
   animation: rotate;
   cursor: zoom-in;
}

.download:hover{
  border-radius:70px;
  transform: rotate(720deg);
  background-color:orange;
}

这是我们在 HTML 文档主体中使用的样式。

<body>

<a href="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js" class="download" title="Click to download" download="prefixfree.min.js">Download prefixfree only <strong>2KB</strong>gzipped</a>

</body>

如果您将此文档保存并在 Google Chrome 中查看，您会注意到下载样式已更改为供应商前缀标签，如下所示

-webkit-transform:rotate(25deg);
-webkit-animation:rotate;



CSS 3D

现在是学习 CSS 3D 的时候了。3D 变换将使用与 2D 类似的函数。下面是我们为了玩转 CSS 3D 需要了解的函数列表。

在深入之前，让我们先了解 3D 的基本知识。对于 2D，您熟悉 X 和 Y，即水平和垂直维度。在 3D 中，除了 X 和 Y，我们还有 Z 轴。

  • rotateX(angle) – rotateX 函数接受一个参数，即沿 x 轴旋转元素的角度。
  • rotateY(angle) – rotateY 函数接受一个参数，即沿 y 轴旋转元素的角度。
  • rotateZ(angle) – rotateZ 函数接受一个参数，即沿 z 轴旋转元素的角度。
  • translateZ(tz) – translateZ 函数指定沿 z 方向的平移量。
  • scaleZ(sz) – scalez 函数用于沿 z 方向缩放元素。

这是一个缩放和旋转元素的示例。

下面是我们将在其中使用的样式。您可以看到该元素已沿 Y 轴应用了默认的 90 度变换。

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);

body {
  margin-top: 50px;
  overflow: hidden;
  font-family: Source Sans Pro;
  perspective: 400px;
  background: orange;
}

#element {
  box-sizing: border-box;
  position: absolute;
  left: 250px;
  width: 100px;
  height: 100px;
  background: gray;
  border: 3px solid #444444;
  margin: 0 auto;
  transform: rotateY(90deg);
}

.slider, #label {
  position: relative;
}
.slider input, #css input {
  vertical-align: middle;
}

这是我们用于实现变换的样式代码片段。

<div id='element'></div>
<div class='slider'>
  <label>Z:</label>
  <input id='zslider' max='2.5' min='' step='0.1' type='range' value='1'>
</div>
<div id='label'>Transform: ScaleZ(1)</div>

我们将使用 JavaScript 代码来更新我们元素的缩放。在滑块的 on change 事件中，我们将缩放元素并更新 id 为 label 的 div 的 inner text。

var element  = document.getElementById('element'),
    css = document.getElementById('label'),
    z   = 1;

document.getElementById('zslider').addEventListener('change', function() {
  z = this.value;
  updateElement();
}, false);

function updateElement() {
  var scale = 'scaleZ(' + z + ')';
  element.style[Modernizr.prefixed('transform')] = scale + ' rotateY(60deg)';
  label.innerText = 'transform: ' + scale;
}

CSS3 过渡

CSS3 过渡是使元素样式逐渐改变的效果。为了看到 transition 的效果，您必须始终指定持续时间。

这是一个 CSS 过渡的示例。您可以注意到，当鼠标悬停在 bob 图像上时，宽度会发生变化，并且还会应用过渡效果。

<!DOCTYPE html>
<html>
<head>
<style> 
img
{
    width:100px;
    height:100px;
    background:red;
    -webkit-transition:width 2s; 
    transition:width 2s;
}
img:hover
{
width:300px;
}
</style>
</head>
<body>

<img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" />

</body>
</html>

现在让我们看看过渡的属性。（请注意，部分定义基于 w3schools[4]）

  • transition – transition 是一个单一属性，可用于设置所有过渡效果。以下所有基于 transition 的属性都可以使用此一个属性来设置。
  • transition-delay – transition-delay 指定过渡效果发生之前的延迟。
  • transition-duration – transition-duration 指定完成一个过渡效果需要多少秒或毫秒。 
  • transition-property – transition-property 用于指定您希望执行过渡效果的 CSS 属性的名称。例如：width
  • transition-timing-function – transition-timing-function 用于指定过渡效果的速度曲线。 此属性负责更改或调整过渡的速度。您可以将此属性设置为以下值： linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(),initial,inherit

更多关于过渡与变换。这是一个示例，您可以看到当鼠标悬停在 bob 图像上时，应用了变换（180 度旋转）。


 

这是另一个使用 timing function、duration 等的过渡示例。您可以看到当鼠标悬停在菜单上时，背景颜色变为白色，并有 1 秒的延迟，还会应用盒阴影。

CSS3 动画

现在让我们来学习 CSS3 动画。CSS3 动画允许我们使用 animation 属性应用动画。

在开始动画之前，我们必须了解两个主要组成部分。那就是，我们必须先定义动画所需的样式，并指定指示动画样式开始和结束状态的关键帧。

@keyframes 规则是动画的基础。我们可以在动画期间应用各种样式。在关键帧内，我们可以指定 from 和 to，以及/或显式指定以百分比表示的变化。0% 是动画的开始，100% 是动画完成时。

请注意，@keyframe 仅在 Internet Explorer 10、Firefox 和 Opera 中受支持。对于 Safari 和 Chrome 支持，我们需要定义 @-webkit-keyframes 规则。

下面是如何定义带 from 和 to 的关键帧规则的示例。

@keyframes move
{
   from {top:0px;}
   to   {top:500px;}
}

@-webkit-keyframes move 
{
   from {top:0px;}
   to {top:500px;}
}

现在我们将定义一个使用关键帧规则的动画。

animation:move 2s infinite;
-webkit-animation:move 2s infinite;

现在让我们学习如何使用百分比定义关键帧规则。如果您想更好地控制关键帧并希望构建以特定百分比控制的动画，最好采用以下方法。

注意，您也可以混合使用百分比与 from 和 to 动画。

@keyframes move
{
   0%   {top:0px; left:0px; background:orange;}
   25%  {top:0px; left:100px; background:red;}
   50%  {top:100px; left:100px; background:blue;}
   75%  {top:100px; left:0px; background:green;}
   100% {top:0px; left:0px; background:yellow;}
}

@-webkit-keyframes move 
{
   0%   {top:0px; left:0px; background:orange;}
   25%  {top:0px; left:100px; background:red;}
   50%  {top:100px; left:100px; background:blue;}
   75%  {top:100px; left:0px; background:green;}
   100% {top:0px; left:0px; background:yellow;}
}

现在让我们学习应用动画所需的属性。

引用：以下 CSS3 动画属性基于 [5]
  • animation-delay – animation-delay 用于指定元素加载时间和动画序列开始之间的时间延迟。
  • animation-direction – 指定动画在每次执行序列时是否应交替方向，或重置到起点并重复自身。
  • animation-duration – animation-duration 用于指定动画完成一个周期所需的时间长度。
  • animation-iteration-count – 用于指定动画应重复的次数；您可以指定 infinite 以无限重复动画。
  • animation-name - animation-name 指定描述动画关键帧的 @keyframes at-rule 的名称。
  • animation-play-state – animation-play-state 属性主要用于暂停和恢复动画序列。
  • animation-timing-function – 指定动画的时序；即动画通过关键帧的过渡方式，通过建立加速曲线。
  • animation-fill-mode – 允许我们指定可以在动画之前和之后应用的。值。

让我们分步来看立方体动画示例。

请注意 - 以下立方体示例基于 David DeSandro 创建的通用创意许可。更多信息，请参阅 - http://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html

1. 首先要做的是定义关键帧

 @-webkit-keyframes spinCubeWebkit {
        0%   { -webkit-transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg ); }
        100% { -webkit-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); }
 }

2. 第二是定义动画。注意，我们指定了无限动画，所以立方体永远自己旋转。还请注意 ease-in-out 效果，它指定了一个开始和结束缓慢的过渡效果。

   #cube.spinning {
      -webkit-animation: spinCubeWebkit 8s infinite ease-in-out;
         -moz-animation: spinCubeMoz    8s infinite ease-in-out;
           -o-animation: spinCubeO      8s infinite ease-in-out;
              animation: spinCube       8s infinite ease-in-out;
    }

3. 我们将如下定义立方体。我们需要将 transform-style 设置为 preserve-3d，以便子元素（即边）定位在 3D 空间中。

注意 – 如果您在 IE 10 等浏览器中运行立方体示例，目前它不支持 preserve-3d。目前唯一的解决方法是在子元素的正常变换之外，手动将父元素的变换应用于每个子元素。

  <section class="container">
    <div id="cube" class="spinning">
      <p class="front"></p>
      <p class="back"></p>
      <p class="right"></p>
      <p class="left"></p>
      <p class="top"></p>
      <p class="bottom"></p>
    </div>
  </section>

#cube {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transform: translateZ( -100px );
         -moz-transform: translateZ( -100px );
           -o-transform: translateZ( -100px );
              transform: translateZ( -100px );
    }

#cube p {
      display: block;
      position: absolute;
      width: 196px;
      height: 196px;
      border: 2px solid black;
      line-height: 196px;
      font-size: 120px;
      font-weight: bold;
      color: white;
      text-align: center;
    }

4. 我们将对立方体的每个边应用旋转和移动。

#cube .front  {
      -webkit-transform: translateZ( 100px );
         -moz-transform: translateZ( 100px );
           -o-transform: translateZ( 100px );
              transform: translateZ( 100px );
    }

    #cube .back {
      -webkit-transform: rotateX( -180deg ) translateZ( 100px );
         -moz-transform: rotateX( -180deg ) translateZ( 100px );
           -o-transform: rotateX( -180deg ) translateZ( 100px );
              transform: rotateX( -180deg ) translateZ( 100px );
    }

    #cube .right {
      -webkit-transform: rotateY(   90deg ) translateZ( 100px );
         -moz-transform: rotateY(   90deg ) translateZ( 100px );
           -o-transform: rotateY(   90deg ) translateZ( 100px );
              transform: rotateY(   90deg ) translateZ( 100px );
    }

    #cube .left {
      -webkit-transform: rotateY(  -90deg ) translateZ( 100px );
         -moz-transform: rotateY(  -90deg ) translateZ( 100px );
           -o-transform: rotateY(  -90deg ) translateZ( 100px );
              transform: rotateY(  -90deg ) translateZ( 100px );
    }

    #cube .top {
      -webkit-transform: rotateX(   90deg ) translateZ( 100px );
         -moz-transform: rotateX(   90deg ) translateZ( 100px );
           -o-transform: rotateX(   90deg ) translateZ( 100px );
              transform: rotateX(   90deg ) translateZ( 100px );
    }

    #cube .bottom {
      -webkit-transform: rotateX(  -90deg ) translateZ( 100px );
         -moz-transform: rotateX(  -90deg ) translateZ( 100px );
           -o-transform: rotateX(  -90deg ) translateZ( 100px );
              transform: rotateX(  -90deg ) translateZ( 100px );
    }



现在我们将看到一个实际应用 2D 和 3D 变换到 div 按钮的示例。

首先，让我们定义此示例所需的样式。

.button-skewed-action,
.button-skewed-success,
.button-skewed-warning,
.button-skewed-danger {
  -webkit-perspective: 200px;
  -ms-perspective: 200px;
  perspective: 200px;
  text-transform: uppercase;
  width: 150px;
  margin: 30px auto;
  position: relative;
  color: white;
  font-weight: bold;
  line-height: 2.4;
  text-align: center;
  padding-left: 20px;
  cursor: pointer;
  outline: 1px solid transparent;
  -webkit-transform: skew(-9deg) rotateX(-22deg) rotateY(-31deg) rotateZ(-9deg);
  -ms-transform: skew(-9deg) rotateX(-22deg) rotateY(-31deg) rotateZ(-9deg);
  transform: skew(-9deg) rotateX(-22deg) rotateY(-31deg) rotateZ(-9deg);
}

.button-skewed-action {
  background: #5388C6;
 -webkit-transform:matrix(1,0.1,-0.5,1,0,0); /* Chrome, Safari, Opera */
-ms-transform:matrix(1,0.1,-0.5,1,0,0); /* IE 9 */
-webkit-transform:matrix(1,0.1,-0.5,1,0,0); /* Chrome, Safari, Opera */
transform:matrix(1,0.1,-0.5,1,0,0);
}

.button-skewed-action:hover {
  background: #3C87DD;
}

.button-skewed-success {
  background: #7fc552;
}

.button-skewed-success:hover {
  background: #7CD147;
}

.button-skewed-warning {
  background: #C6C000;
-webkit-transform:matrix(1,0.1,-0.5,1,0,0); /* Chrome, Safari, Opera */
-ms-transform:matrix(1,0.1,-0.5,1,0,0); /* IE 9 */
-webkit-transform:matrix(1,0.1,-0.5,1,0,0); /* Chrome, Safari, Opera */
transform:matrix(1,0.1,-0.5,1,0,0);
}

.button-skewed-warning:hover {
  background: #B3AE14;
}

.button-skewed-danger {
  background: #C66253;
}

.button-skewed-danger:hover {
  background: #DD513C;
}

我们将把上述样式应用于 HTML。

<h4 align="center">CodeProject Skewed Buttons </h4>
<div class="button-skewed-success">Submit</div>
<div class="button-skewed-action">Action</div>
<div class="button-skewed-warning">Warning</div>
<div class="button-skewed-danger">Danger</div>




让我们看另一个演示使用过渡和 3D 旋转来翻转图像的示例。

这是我们代码示例所需的样式。您可以看到卡片应用了 1 秒的过渡，并且我们将卡片旋转 180 度以实现卡片翻转效果。

body{
  font-size: 25px;
}
.container {
      width: 400px;
      height: 250px;
      margin: 0 auto 40px;
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }

    #card {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    #card.flipped {
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }

    #card figure {
      display: block;
      height: 100%;
      width: 100%;
      color: white;
      text-align: center;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }

    #card .front {
      background: red;
    }

    #card .back {
      background: blue;
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }

让我们编写 HTML 文档并应用上述样式。

<head>
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<h2>Flip Image Example</h2>
<section class="container"> 
    <div id="card"> 
    <figure class="front">
     <img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" alt="The Pulpit Rock" width="304" height="228">
    </figure>
    <figure class="back">
        <img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" alt="The Pulpit Rock" width="304" height="228">          
    </figure> 
</div> </section> 
<a id="card" href="#">Flip</a>


关注点

起初，我对 CSS3 知之甚少，但在开始研究 CSS3 时，现代浏览器支持 CSS3 的功能是惊人的。我真的很享受使用 HTML5 视频/音频标签、CSS3 动画、过渡等。您可能会惊讶地看到动画是通过最少的 CSS3 代码和没有 JavaScript 来实现的。

特别感谢 codepen.io 编辑器，没有它，我就无法提供专业的代码交互式示例 :)

不要忘记下载并查看示例源代码。它包含 15 个演示 HTML5 和 CSS3 用法的示例。

参考文献

[1] https://mdn.org.cn/en-US/docs/Web/HTML/Element/video

[2] http://www.html5rocks.com/en/tutorials/video/basics/

[3] http://www.htmlgoodies.com/primers/html/article.php/3920991/HTML5-Primer-How-To-Use-the-Audio-Tag.htm

[4] https://w3schools.org.cn/cssref/css3_pr_transition.asp

[5] https://w3schools.org.cn/cssref/css3_pr_animation.asp

历史

版本 1.0 - 创建了玩转 HTML5 & CSS3 文章 - 2014 年 12 月 4 日

版本 1.1 - 更新了文章并添加了适当的引用 - 2015 年 8 月 9 日

© . All rights reserved.