freecodecamp-响应式web设计-应用视觉设计

freecodecamp-响应式web设计-应用视觉设计

1. 应用视觉设计：使用 text-align 属性创建视觉平衡

这部分课程主要关于应用视觉设计。开始的挑战展示了一些核心的原则，代码基于一个指定的卡片布局。

web 内容大部分都是文本。CSS 里面的text-align属性可以控制文本的对齐方式。

text-align: justify;可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。

text-align: center;可以让文本居中对齐。

text-align: right;可以让文本右对齐。

text-align: left;是text-align的默认值，它可以让文本左对齐。

居中对齐h4标签文本，文本内容为 “Google”。两端对齐段落标签文本，文本介绍了 Google 的创立。

<style>h4 {text-align: center;}p {text-align: justify;}.links {margin-right: 20px;}.fullCard {border: 1px solid #ccc;border-radius: 5px;margin: 10px 5px;padding: 4px;}.cardContent {padding: 10px;}
</style>
<div class="fullCard"><div class="cardContent"><div class="cardText"><h4>Google</h4><p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</p></div><div class="cardLinks"><a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a></div></div>
</div>

2. 应用视觉设计：使用 width 属性调整元素的宽度

你可以使用 CSS 里面的width属性来指定元素的宽度。属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。下面这个例子把图片的宽度设置为 220px：

img {
width: 220px;
}

给卡片添加width属性，设置它的宽度为 245px。使用fullCard class 来选择元素。

<style>h4 {text-align: center;}p {text-align: justify;}.links {margin-right: 20px;text-align: left;}.fullCard {border: 1px solid #ccc;border-radius: 5px;margin: 10px 5px;padding: 4px;width: 245px;}.cardContent {padding: 10px;}</style>
<div class="fullCard"><div class="cardContent"><div class="cardText"><h4>Google</h4><p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</p></div><div class="cardLinks"><a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a></div></div>
</div>

4. 应用视觉设计：使用 height 属性调整元素的高度

和width属性类似，你可以使用 CSS 里面的height属性来指定元素的高度。下面这个例子把图片的高度设置为 20px：

img {
height: 20px;
}

给h4标签添加height属性并设置值为 25px。

<style>h4 {text-align: center;height: 25px;}p {text-align: justify;}.links {margin-right: 20px;text-align: left;}.fullCard {width: 245px;border: 1px solid #ccc;border-radius: 5px;margin: 10px 5px;padding: 4px;}.cardContent {padding: 10px;}h4 {height: 25px;}
</style>
<div class="fullCard"><div class="cardContent"><div class="cardText"><h4>Google</h4><p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</p></div><div class="cardLinks"><a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a></div></div>
</div>

5. 应用视觉设计：使用 strong 标签加粗文本

术语：Strong => s => 加粗。

你可以使用strong标签来加粗文字。添加了strong标签后，浏览器会自动给元素应用font-weight:bold;。

在p标签里的 “斯坦福大学” 外面添加strong标签。

<p>Google 由在<strong>斯坦福大学</strong>攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</p>

6. 应用视觉设计：使用 u 标签给文本添加下划线

术语：Underline => u => 下划线。

你可以使用u标签来给文字添加下划线。添加了u标签后，浏览器会自动给元素应用text-decoration: underline;。

给 “理工博士” 添加u标签，不要给整个 class 为cardText的父div添加。

注意：锚点默认给文本添加下划线，如果u标签的下划线和页面的锚点混淆，请避免使用它。

<p>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</p>

7. 应用视觉设计：使用 em 标签强调文本

术语：emphasis => em => 强调。

你可以使用em标签来强调文本。由于浏览器会自动给元素应用font-style: italic;，所以文本会显示为斜体。

在p标签里面嵌套em标签来强调文本。

<p><em> 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>

8. 应用视觉设计：使用 s 标签给文本添加删除线

术语：Strikethrough => s => 删除线。

你可以用s标签来给文字添加删除线，我是明晃晃的删除线，它代表着这段文字不再有效。添加了s标签后，浏览器会自动给元素应用text-decoration: line-through;。

在h4标签里的 “Google” 外添加s标签，然后在s标签外面添加单词 Alphabet，Alphabet 不要有删除线格式。

<div class="fullCard"><div class="cardContent"><div class="cardText"><h4> Alphabet <s>Google</s></h4><p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p></div><div class="cardLinks"><a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br><a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a></div></div>
</div>

9. 应用视觉设计：使用 hr 标签创建水平线

术语：Horizontal Rule => hr => 水平线。

你可以用hr标签来创建一条宽度撑满父元素的水平线。它一般用来表示文档主题的改变，在视觉上将文档分隔成几个部分。

在包含卡片标题的h4下面添加一个hr标签。

注意
在 HTML 里，hr是自关闭标签，所以不需要一个单独的关闭标签。

      <h4><s>Google</s>Alphabet</h4><hr><p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>

10. 应用视觉设计：调整文本的背景色

为了让页面更美观，除了设置整个页面的背景色以及文字颜色外，你还可以单独设置文字的背景色，即在文字的父元素上添加background-color属性。在本挑战里我们将使用rgba()颜色，而不是之前学到的hex编码或者rgb()颜色。

rgba 代表：
r = red 红色
g = green 绿色
b = blue 蓝色
a = alpha 透明度
RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。rgba()非常棒，因为你可以设置颜色的透明度，这意味着你可以做出一些很漂亮的半透明效果。

在本挑战里你将会用到这个代码background-color: rgba(45, 45, 45, 0.1)。它表示背景是黑灰色，因为设置了透明度为 0.1，所以几乎是透明的。

为了让文字更醒目，设置h4元素的background-color属性值为上面指定的rgba()。

同时移除h4的height属性，并添加padding属性，值为 10px。

  h4 {text-align: center;// height: 25px;background-color: rgba(45, 45, 45, 0.1);padding: 10px;}

11. 应用视觉设计：调整标题与段落的大小

标题（h1到h6）的文字应该比的段落的文字大，这样可以让用户更直观的看到页面的布局，同时能区别出不同元素的重要程度，更方便用户捕捉关键的信息。你可以使用font-size属性来设置元素内文字的大小。

把h4标签的font-size改成 27 像素，让标题更醒目。

  h4 {text-align: center;background-color: rgba(45, 45, 45, 0.1);padding: 10px;font-size: 27px;}

12. 应用视觉设计：给卡片元素添加 box-shadow

box-shadow属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。

box-shadow属性的每个阴影依次由下面这些值描述：
offset-x阴影的水平偏移量；
offset-y阴影的垂直偏移量;
blur-radius模糊距离；
spread-radius阴影尺寸；
颜色。
其中blur-raduis和spread-raduis是可选的。

下面是创建了多个阴影的 CSS 例子，阴影加了模糊效果，颜色是透明度很高的黑色:

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

现在卡片已经添加了 idthumbnail。把上面的box-shadow值赋给卡片。

<style>h4 {text-align: center;background-color: rgba(45, 45, 45, 0.1);padding: 10px;font-size: 27px;}p {text-align: justify;}.links {text-align: left;color: black;}.fullCard {width: 245px;border: 1px solid #ccc;border-radius: 5px;margin: 10px 5px;padding: 4px;}.cardContent {padding: 10px;}.cardText {margin-bottom: 30px;}#thumbnail {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
</style>
<div class="fullCard" id="thumbnail"><div class="cardContent"><div class="cardText"><h4>Alphabet</h4><hr><p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p></div><div class="cardLinks"><a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br><a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a></div></div>
</div>

13. 应用视觉设计：降低元素透明度的 opactiy

CSS 里的opacity属性用来设置元素的透明度。

值 1 代表完全不透明。
值 0.5 代表半透明。
值 0 代表完全透明。
透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。

使用linksclass 选择所有的超链接并设置其opacity值为 0.7。

 .links {opacity: 0.7;}
</style>
<div class="fullCard" id="thumbnail"><div class="cardContent"><div class="cardText"><h4>Alphabet</h4><hr><p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p></div><div class="cardLinks"><a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br><a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a></div></div>
</div>

14. 应用视觉设计：使用 text-transform 属性给文本添加大写效果

CSS 里面的text-transform属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示，且无需直接改变 HTML 元素中的文本。

下面的表格展示了text-transform的不同值对文字 “Transform me” 的影响。

Value Result
lowercase “transform me”
uppercase “TRANSFORM ME”
capitalize “Transform Me”
initial 使用默认值
inherit 使用父元素的text-transform值。
none Default:不改变文字。

使用text-transform属性把h4内的英文的所有字母变成大写。

  h4 {text-align: center;background-color: rgba(45, 45, 45, 0.1);padding: 10px;font-size: 27px;text-transform: uppercase;}

15. 应用视觉设计：设置多个标题元素的 font-size

font-size属性用来指定元素内文字的大小。这个规则可以应用到多个元素上，合理的使用，能让页面的文字显示的错落有致。在本挑战里，你将要设置h1到h6的每个标题文字的大小。

设置h1标签的font-size为 68px。
设置h2标签的font-size为 52px。
设置h3标签的font-size为 40px。
设置h4标签的font-size为 32px。
设置h5标签的font-size为 21px。
设置h6标签的font-size为 14px。

<style>h1 {font-size: 68px;}h2 {font-size: 52px;}h3 {font-size: 40px;}h4 {font-size: 32px;}h5 {font-size: 21px;}h6 {font-size: 14px;}
</style><h1>我是 h1 文字</h1>
<h2>我是 h2 文字</h2>
<h3>我是 h3 文字</h3>
<h4>我是 h4 文字</h4>
<h5>我是 h5 文字</h5>
<h6>我是 h6 文字</h6>

16. 应用视觉设计：设置多个标题元素的 font-weight

在上一个挑战里你已经设置了每个标题的font-size，接下来你将设置font-weight。

font-weight属性用于设置文本中所用的字体的粗细。

设置h1标签的font-weight为 800。
设置h2标签的font-weight为 600。
设置h3标签的font-weight为 500。
设置h4标签的font-weight为 400。
设置h5标签的font-weight为 300。
设置h6标签的font-weight为 200。

<style>h1 {font-size: 68px;font-weight: 800;}h2 {font-size: 52px;font-weight: 600;}h3 {font-size: 40px;font-weight: 500;}h4 {font-size: 32px;font-weight: 400;}h5 {font-size: 21px;font-weight: 300;}h6 {font-size: 14px;font-weight: 200;}
</style>
<h1>我是 h1 文字</h1>
<h2>我是 h2 文字</h2>
<h3>我是 h3 文字</h3>
<h4>我是 h4 文字</h4>
<h5>我是 h5 文字</h5>
<h6>我是 h6 文字</h6>

17. 应用视觉设计：设置段落文本的 font-size

CSS 里面的font-size属性不只限于标题，它可以应用于任何包含文字的元素内。

把段落的font-size设置为 16px 让它看起来更清晰。

<style>p {font-size: 16px;}
</style>

18. 应用视觉设计：设置段落的 line-height

CSS 提供line-height属性来设置行间的距离。行高，顾名思义，用来设置每行文字所占据的垂直空间。

给p标签添加line-height属性并赋值 25px。

<style>p {font-size: 16px;line-height: 25px;}
</style>

19. 应用视觉设计：调整锚点的悬停状态

本挑战将要涉及到伪类。伪类是可以添加到选择器上的关键字，用来选择元素的指定状态。

比如，超链接可以使用:hover伪类选择器定义它的悬停状态样式。下面是悬停超链接时改变超链接颜色的 CSS：

a:hover {
color: red;
}

代码编辑器里面已经有了一个 CSS 规则把所有的a标签定义成了黑色。添加一个规则，满足如下，当用户悬停a标签时，把color变成蓝色。

<style>a {color: #000;}a:hover {color: blue;}
</style>
<a href="http://freecatphotoapp.com/" target="_blank">猫咪相册 App</a>

20. 应用视觉设计：更改元素的相对位置

在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。

当元素的 position 设置为relative时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。 CSS 里控制各个方向偏移量的对应的属性是left、right、top和bottom。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems。下面的例子展示了段落向上偏移 10 像素：

p {
position: relative;
bottom: 10px;
}
把元素的 position 设置成 relative 并不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。

注意
定位可以让你在页面布局上更灵活、高效。注意不管元素的定位是怎样，内部的 HTML 代码阅读起来应该是整洁、有意义的。这样也可以让视障人员（他们重度依赖辅助设备比如屏幕阅读软件）能够浏览你的网页。

把h2的position设置成relative，使用相应的 CSS 属性调整h2的位置，使其向下偏移 15 像素，同时还在普通流中占据原来的位置。注意不要对 h1 和 p 元素的位置产生影响。

<style>h2 {position: relative;bottom: -15px;//bottom: 0.8em;}
</style>
<body><h1>论如何优雅定位</h1><h2>我要离 h1 远一点！</h2><p>我觉得 h2 没变，还是在它原来的位置，相离莫相忘，且行且珍惜。</p>
</body>

21. 应用视觉设计：使用 CSS 偏移移动相对定位的元素

CSS 里面的top、bottom、left和right定义了元素在相应方位的偏移距离。元素将从当前位置，向属性相反的方向偏移。就像你在上一个挑战看到的，top属性使h2向下移动。left属性使元素向右移动。

通过 CSS 属性把h2向上移动 10 像素，向右移动 15 像素。

<head> <style>h2 {position: relative;bottom: 10px;left: 15px;}
</style>
</head>
<body><h1>论如何优雅定位</h1><h2>我要离 h1 近一点！</h2><p>我觉得 h2 没变，还是在它原来的位置，相离莫相忘，且行且珍惜。</p>
</body>

22. 应用视觉设计：绝对定位的参照物是元素的父元素

接下来要介绍 CSSposition属性的取值选项absolute，absolute相对于其包含块定位。和relative定位不一样，absolute定位会将元素从当前的文档流里面移除，周围的元素会忽略它。可以用 CSS 的 top、bottom、left 和 right 属性来调整元素的位置。

absolute定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是position:relative;）,浏览器会继续寻找直到默认的 body 标签。

通过声明position为absolute，固定#searchbar元素到它父元素section的右上角。即设定其top和right为 50 像素。

<style>#searchbar {position: absolute;top: 50px;right: 50px;}section {position: relative;}
</style>
<body><h1>欢迎！</h1><section><form id="searchbar"><label for="search">搜索：</label><input type="search" id="search" name="search"><input type="submit" name="submit" value="Go!"></form></section>
</body>

23. 应用视觉设计：固定定位的参照物是浏览器的窗口

接下来要介绍的是fixed定位，它是一种特殊的绝对（absolute）定位，区别是其包含块是浏览器窗口。和绝对定位类似，fixed定位使用 top、bottom、left 和 right 属性来调整元素的位置，并且会将元素从当前的文档流里面移除，其它元素会忽略它的存在。

fixed定位和absolute定位的最明显的区别是fixed定位元素不会随着屏幕滚动而移动。

代码里的导航栏已经添加了值为navbar的 id。把它的position设置成fixed，设定其top和left为 0 像素。注意观察对h1的影响，h1并没有被导航栏挤下来，而是遮盖住了，为了显示完全需要单独调整h1的位置。

<style>#navbar {position: fixed;top: 0px;left: 0px;width: 100%;background-color: #767676;}nav ul {margin: 0px;padding: 5px 0px 5px 30px;}nav li {display: inline;margin-right: 20px;}a {text-decoration: none;}
</style>
<body><header><h1>欢迎!</h1><nav id="navbar"><ul><li><a href="">网站首页</a></li><li><a href="">联系我们</a></li></ul></nav></header><p>当导航条固定在浏览器窗口上时，我会上移。</p>
</body>

24. 应用视觉设计：使用 float 属性将元素左浮动或右浮动

接下来要介绍的定位机制并不是position属性的选项，它通过元素的float属性来设置。浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用width属性来指定浮动元素占据的水平空间。

设置#left元素的float为left，设置#right元素的float为right。使这两个元素按两列布局，section和aside左右排列。

<head><style>#left {float: left;width: 50%;}#right {float: right;width: 40%;}aside, section {padding: 2px;background-color: #ccc;}</style>
</head>
<body><header><h1>欢迎！</h1></header><section id="left"><h2>内容</h2><p>好样的</p></section><aside id="right"><h2>侧边栏</h2><p>一些链接</p></aside>
</body>

25. 应用视觉设计：使用 z-index 属性更改重叠元素的位置

当一些元素重叠时，在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。你可以使用z-index属性指定元素的堆叠次序。z-index的取值是整数，数值大的元素优先于数值小的元素显示。

给 class 为first的元素（红色的方块）添加z-index属性并赋值为 2，使它显示在蓝色方块的上方。

<style>div {width: 60%;height: 200px;margin-top: 20px;}.first {background-color: red;position: absolute;z-index: 2;}.second {background-color: blue;position: absolute;left: 40px;top: 50px;z-index: 1;}
</style><div class="first">first</div>
<div class="second">second</div>

26. 应用视觉设计：使用 margin 属性将元素水平居中

在应用设计中经常需要把一个块级元素水平居中显示。一种常见的实现方式是把块级元素的margin值设置为auto。

同样的，这个方法也对图片奏效。图片默认是内联元素，但是可以通过设置其display属性为block来把它变成块级元素。

通过给页面中的div添加值为auto的margin属性将其居中显示。

<style>div {background-color: blue;height: 100px;width: 100px;margin: auto;}
</style>
<div>pics</div>

27. 应用视觉设计：了解互补色

色彩理论以及设计色彩学很复杂，这里将只涉及很基础的部分。在网站设计里，颜色能让内容更醒目，能调动情绪，从而创造舒适的视觉体验。不同的颜色组合对网站的视觉效果影响很大，精妙的设计都需要适宜的颜色来美化页面内容。

一半是科学，一半是艺术，色环是我们认识颜色关系的好工具 - 它是一个近色相邻异色相离的圆环。当两个颜色恰好在色环的两端时，这两个颜色叫做补色。绘画中两只补色在混合后会变成灰色。补色搭配能形成强列的对比效果，传达出活力、能量、兴奋等意义。

下面是一些十六进制码（hex code）补色的例子：

红色（#FF0000）和蓝绿色 (#00FFFF)
绿色（#00FF00）和品红色（#FF00FF）
蓝色（#0000FF）和黄色（#FFFF00）
现在很多的在线选色工具都有寻找补色的功能。

注意
对于所有的颜色关卡： 颜色能吸引用户的注意，但不是唯一的方式，切勿喧宾夺主，过度使用会适得其反。详细会在应用无障碍章节介绍。

把blue和yellowclass 的background-color属性改成相应的颜色。注意观察它们之间的编码区别以及和它们和白色的编码区别。

<style>body {background-color: #FFFFFF;}.blue {background-color: #0000FF;}.yellow {background-color: #FFFF00;}div {display: inline-block;height: 100px;width: 100px;}
</style>
<div class="blue"></div>
<div class="yellow"></div>

28. 应用视觉设计：了解三原色

电脑显示器和手机屏幕是一种加色模型，将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，以产生多种多样的色光。两种原色相加产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G）。你在上一个挑战里已经见过这些颜色了。这些二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。例如，品红色是红色和蓝色相加产生，它是绿色的补色。

三次色是由原色和二次色相加产生的颜色，例如红色（原色）和黄色（二次色）相加产生橙色。将这六种颜色中相邻的颜色相加，便产生了十二色色环。

设计里面有很多种颜色搭配方法。涉及到三次色的一种配色方法是分裂补色搭配法。选定主色之后，在色环上选择与它的补色相邻的两种颜色与之搭配。此种搭配既有对比，又不失和谐。

下面是使用分裂补色搭配法创建的三个颜色：

颜色 HEX 颜色码
橙色 #FF7D00
蓝绿色 #00FFFF
树莓红 #FF007D

把 class 为orange、cyan和rasberry的background-color改成其对应的颜色。由于 rasberry 不在浏览器 17 种标准色之内，不能直接用作颜色名，所以要使用 HEX 颜色码。

<style>body {background-color: #FFFFFF;}.orange {background-color: #FF7D00;}.cyan {background-color: #00FFFF;}.raspberry {background-color: #FF007D;}div {height: 100px;width: 100px;margin-bottom: 5px;}
</style><div class="orange"></div>
<div class="cyan"></div>
<div class="raspberry"></div>

30. 应用视觉设计：将各种元素的颜色调整为互补色

通过前面关卡的学习，我们知道了补色搭配能形成强列的对比效果，让内容更富生机。但是如果使用不当效果会适得其反，比如如果文字背景色和文字颜色互为补色，文字会很难看清。通常的做法是，一种颜色做为主要颜色，其补色用来装点页面。

使用深青色（#09A7A1）做为页面主色，用其补色橙色（#FF790E）来装饰登录按钮。把header和footer的background-color从黑色改成深青色。然后把h2的文字color也改成深青色。最后，把button的background-color改成橙色。

<style>body {background-color: white;}header {background-color: black;color: white;padding: 0.25em;background-color: #09A7A1;}h2 {color: #09A7A1;}  button {background-color: #FF790E;}footer {background-color: #09A7A1;color: white;padding: 0.5em;}
</style>
<header><h1>FCC 中国</h1>
</header>
<main><article><h2>FCC 成都社区</h2><p>【FCC成都社区】是一个非营利性的公益性技术社区，由一群编程技术爱好者，利用业余时间搭建的一个友好的交流、学习、互助的平台，帮助开发者、技术爱好者提升个人技术能力，同时帮助企业解决人才问题。</p><button><a href="https://freecodecamp-chengdu.github.io/" target="_blank">更多</a></button></article><article><h2>FCC 深圳社区</h2><p>【FCC 深圳社区】全称 freeCodeCamp 深圳社区，面向深圳所有有意学习编程、热爱编程、甚至想要通过编程找到一份好工作的学生和社会群众，传承 freeCodeCamp 中文社区的主旨思想，倡导人人皆可编程。</p><button><a href="https://freecodecamp-shenzhen.github.io/" target="_blank">更多</a></button></article>
</main>
<br>
<footer>&copy;2018 FCC 中国</footer>

31. 应用视觉设计：调整颜色的色相

HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标系中的表示法，描述了色相（hue）、饱和度（saturation）、亮度（lightness）。CSS3 引入了对应的hsl()属性做为对应的颜色描述方式。

色相是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。在hsl()里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。

饱和度是指色彩的纯度，也就是颜色里灰色的占比，越高色彩越纯，低则逐渐变灰，取0-100%的数值。

亮度决定颜色的明暗程度，也就是颜色里白色或者黑色的占比，100% 亮度是白色， 0% 亮度是黑色，而 50% 亮度是“一般的”。

下面是一些使用hsl()描述颜色的例子，颜色都为满饱和度，中等亮度:

颜色 HSL
红 hsl(0, 100%, 50%)
黄 hsl(60, 100%, 50%)
绿 hsl(120, 100%, 50%)
蓝绿 hsl(180, 100%, 50%)
蓝 hsl(240, 100%, 50%)
品红 hsl(300, 100%, 50%)

把 class 为green、cyan和bluediv的background-color使用hsl()表示法描述相应的颜色。颜色都为满饱和度，亮度中等。

<style>body {background-color: #FFFFFF;}.green {background-color: hsl(120, 100%, 50%);}.cyan {background-color: hsl(180, 100%, 50%);}.blue {background-color: hsl(240, 100%, 50%);}div {display: inline-block;height: 100px;width: 100px;}
</style><div class="green"></div>
<div class="cyan"></div>
<div class="blue"></div>

32. 应用视觉设计：调整颜色的色调

hsl()使 CSS 更改色调更方便。给纯色添加白色可以创造更浅的色调，添加黑色可以创造更深的色调。另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。回忆下hsl()里面的‘s’和‘l’分辨代表饱和度和亮度。饱和度代表灰色的占比，亮度代表白色和黑色的占比。这在当你有了一个基色调却需要微调时非常有用。

页面的导航栏目前继承了header的background-color。改变nav元素的background-color，保留基色蓝绿色，调整它的色调和明暗使它具有 80% 的饱和度以及 25% 的亮度。

<style>header {background-color: hsl(180, 90%, 35%);color: #FFFFFF;}nav {background-color: hsl(180, 80%, 25%);}h1 {text-indent: 10px;padding-top: 10px;}nav ul {margin: 10px;padding: 5px 0px 5px 30px;}nav li {display: inline;margin-right: 20px;}a {text-decoration: none;color: inherit;}
</style><header><h1>FCC 中国</h1><nav><ul><li><a href="">首页</a></li><li><a href="">课程</a></li><li><a href="">论坛</a></li><li><a href="">新闻</a></li><li><a href="">设置</a></li></ul></nav>
</header>

33. 应用视觉设计：创建一个 CSS 线性渐变

HTML 元素的背景色并不局限于单色。CSS 还提供了颜色过渡，也就是渐变。可以通过background里面的linear-gradient()来实现线性渐变，下面是它的语法：

background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, …);

第一个参数指定了颜色过渡的方向 - 它的值是角度，90deg 代表垂直渐变，45deg 的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序：

例子：

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

使用linear-gradient()给div添加background渐变色，渐变角度 35deg，从#CCFFFF过渡到#FFCCCC。

注意
有很多种方式指定颜色值，如rgb()或者hsl()。在本关里请使用 hex 颜色码。

<style>div{ border-radius: 20px;width: 70%;height: 400px;margin: 50px auto;background: linear-gradient(35deg, #CCFFFF, #FFCCCC);}</style><div>世界</div>

34. 应用视觉设计：使用 CSS 线性渐变创建条纹元素

repeating-linear-gradient()函数和linear-gradient()很像，主要区别是repeating-linear-gradient()重复指定的渐变。 repeating-linear-gradient()有很多参数，为了便于理解，本关只用到角度值和起止渐变颜色值。

角度就是渐变的方向。起止渐变颜色值代表渐变颜色及其宽度值，由颜色值和起止位置组成，起止位置用百分比或者像素值表示。

在代码编辑器的例子里，渐变开始于 0 像素位置的yellow，然后过渡到距离开始位置 40 像素的blue。由于下一个起止渐变颜色值的起止位置也是 40 像素，所以颜色直接渐变成第三个颜色值green，然后过渡到距离开始位置 80 像素的red。

下面的代码可以帮助理解成对的起止渐变颜色值是如何过渡的。

0px [黄色 – 过渡 – 蓝色] 40px [绿色 – 过渡 – 红色] 80px

如果每对起止渐变颜色值的颜色都是相同的，由于是在两个相同的颜色间过渡，那么中间的过渡色也为同色，接着就是同色的过渡色和下一个起止颜色，最终产生的效果就是条纹。

使用repeating-linear-gradient()函数创建一个渐变角度为 45deg 的条纹，然后设置第一对渐变颜色为yellow, 第二对渐变颜色为black。

<style>div{ border-radius: 20px;width: 70%;height: 400px;margin:  50 auto;background: repeating-linear-gradient(45deg,yellow 0px,yellow 40px,black 40px,black 80px);}</style><div></div>

35. 应用视觉设计：通过添加细微图案作为背景图像来创建纹理

添加一个精致的背景图，可以增加页面的质感，让页面更美观。关键是要找到一个平衡点，抢了内容的风头，喧宾夺主可就不妙了。background属性支持使用url()函数通过链接的方式引入一个指定纹理或样式的图片。图片链接地址在括号内，一般会用引号包起来。

用body选择器设置整个页面的background为 urlhttps://i.imgur.com/MJAkxbh.png指定的图片。

<style>body {background: url(https://i.imgur.com/MJAkxbh.png);}
</style>

36. 应用视觉设计：使用 CSS Transform scale 属性可以更改元素的大小

CSS 属性transform里面的scale()函数，可以用来改变元素的显示比例。下面的例子把页面的段落元素放大了 2 倍：

p {
transform:scale(2);
}

把 id 为ball2的元素放大到原始大小的 1.5 倍。

<style>.ball { width: 40px;height: 40px;margin: 50 auto;position: fixed;background: linear-gradient(35deg,#ccffff,#ffcccc);border-radius: 50%;}#ball1 {left: 20%;}#ball2 {left: 65%;transform:scale(1.5);}</style><div class="ball" id= "ball1"></div>
<div class="ball" id= "ball2"></div>

37. 应用视觉设计：使用CSS Transform scale 属性在悬停时缩放元素

transform属性有很多函数，可以对元素进行调整大小、移动、旋转、翻转等操作。当使用伪类描述元素的指定状态如:hover时，transform属性可以方便的给元素添加交互。

下面是当用户悬停段落元素时，段落大小缩放到原始大小 2.1 倍的例子：

p:hover {
transform: scale(2.1);
}

给div伪类hover添加transform属性，使其当鼠标悬停时大小缩放到原始大小的 1.1 倍。

<style>div { width: 70%;height: 100px;margin:  50px auto;background: linear-gradient(53deg,#ccfffc,#ffcccf);}div:hover {transform: scale(1.1);}
</style>
<div></div>

38. 应用视觉设计：使用 CSS Transform skex 属性沿X轴倾斜元素

接下来要介绍的transform属性是skewX，skewX使选择的元素沿着 X 轴（横向）翻转指定的角度。

下面的代码沿着 X 轴翻转段落元素 -32 度。

p {
transform: skewX(-32deg);
}

使用transform属性沿 X 轴翻转 id 为bottom的元素 24 度。

<style>div { width: 70%;height: 100px;margin:  50px auto;}#top {background-color: red;transform: skewX(-85deg);}#bottom {background-color: blue;transform: skewX(24deg);}
</style><div id="top"></div>
<div id="bottom"></div>

39. 应用视觉设计：使用 CSS Transform skex 属性沿Y轴倾斜元素

skewX函数使指定元素沿 X 轴翻转指定的角度，想必你已经猜到了，skewY属性使指定元素沿 Y 轴（垂直方向）翻转指定角度。

使用transform属性沿 Y 轴翻转 id 为top的元素 -10 度。

<style>div { width: 70%;height: 100px;margin: 50px auto;}#top {background-color: red;transform: skewY(-10deg);}#bottom {background-color: blue;transform: skewX(24deg);}
</style><div id="top"></div>
<div id="bottom"></div>

40. 应用视觉设计：使用 CSS 创建一个图形

术语表：blur-radius => 模糊半径，spread-radius => 辐射半径，transparent => 透明的，border-radius => 圆角边框。

通过使用选择器选择不同的元素并改变其属性，你可以创造一些有趣的形状。比如新月。你可以使用box-shadow属性来设置元素的阴影，border-radius属性控制元素的圆角边框。

首先你将会创建一个圆的、透明的对象，它具有模糊阴影并略微向两边递减。如你所见，这个阴影其实就是新月形狀。

为了创建一个圆形的对象，border-radius应该被设置成 50%。

你应该还记得之前关卡的box-shadow属性以及它的依次取值offset-x、offset-y、blur-radius、spread-radius和颜色值。其中blur-radius和spread-radius是可选的。

把编辑器里的正方形元素变成新月形状。首先，把background-color改为 transparent，接着把border-radius属性设置成 50%，以创建一个圆形。最后，更改box-shadow属性，使其offset-x为 25px，offset-y为 10px，blur-radius为 0，spread-radius为 0，color为 blue。

<style> .center
{position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;width: 100px;height: 100px;background-color: transparent;border-radius: 50%;box-shadow: 25px 10px 10px 10px green; box-shadow: 25px 10px 0 0 blue;}</style>
<div class="center"></div>

41. 应用视觉设计：使用 CSS 和 HTML 创建更复杂的形状

世界上最流行的形状非心形莫属了，在本关里你将用纯 CSS 创建一个心形。但是首先你需要了解:before和:after伪类。这些伪类用来在选择元素之前和之后添加一些内容。在下面的例子里，:before伪类元素用来给 class 为heart的元素添加一个正方形。

.heart:before {
content: “”;
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -50px;
left: 5px;
}
:before和:after必须配合content来使用。这个属性通常用来给元素添加内容诸如图片或者文字。当:before和:after伪类用来添加某些形状而不是图片或文字时，content属性仍然是必需的，但是它的值可以是空字符串。

在上面的例子里，class 为heart元素的:before伪类添加了一个黄色的长方形，长方形的height和width分别为 50px 和 70px。由于设置了其边框半径为 25%，所以长方形为圆角长方形，同时其相对位置为距离left5px，以及向top偏移 50px。

把屏幕里的元素变成心形。在heart:after选择器里面，把background-color改成粉色（pink），把border-radius改成 50%。

接下来，在heartclass 选择器（单纯的heart元素）里面，完善transform属性。使用rotate()函数并赋参 -45 度。（rotate()用法和skewX以及skewY类似）。

最后，在heart:before选择器里面，设置content属性为空字符串。

<style> .heart {position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;background-color: pink;height: 50px;width: 50px;transform: rotate(-45deg);
}
.heart:after {background-color: pink;content: "";border-radius: 50%;position: absolute;width: 50px;height: 50px;top: 0px;left: 25px;
}
.heart:before {content: '';background-color: pink;border-radius: 50%;position: absolute;width: 50px;height: 50px;top: -25px;left: 0px;
}
</style>
<div class = "heart"></div>

42. 应用视觉设计：了解 CSS 的关键帧和动画是如何工作的

如果要给元素添加动画，你需要了解animation属性以及@keyframes规则。animation属性控制动画的外观，@keyframes规则控制动画中各阶段的变化。总共有 8 个animation属性。为了便于理解，本关暂时只涉及到两个最常用的属性。

animation-name设置动画的名称， 也就是要绑定的选择器的@keyframes的名称。

animation-duration设置动画所花费的时间。

@keyframes能够创建动画。 创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。具体是通过设置动画期间对应的“frames”的 CSS 的属性，以百分比来规定改变的时间，或者通过关键词“from”和“to”，等价于 0% 和 100%。打个比方，CSS 里面的 0% 属性就像是电影里面的开场镜头。CSS 里面的 100% 属性就是元素最后的样子，相当于电影里的演职员表或者鸣谢镜头。CSS 在对应的时间内给元素过渡添加效果。下面举例说明@keyframes和动画属性的用法：

#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
id 为anim的元素，代码设置animation-name为colorful，设置animation-duration为 3 秒。然后把@keyframes引用到名为colorful的动画属性上。colorful在动画开始时（0%）设置颜色为蓝色，在动画结束时（100%）设置颜色为黄色。注意不是只有开始和结束的过渡可以设置，0% 到 100% 间的任意百分比你都可以设置。

给 id 为rect 的元素添加动画，设置其animation-name为 rainbow，设置其animation-duration为 4 秒。然后声明@keyframes规则，设置动画开始时（0%）的background-color为蓝色，动画中间时（50%）为绿色，动画结束时（100%）为为黄色。

<style>div {height: 40px;width: 70%;background: black;margin: 50px auto;border-radius: 5px;}#rect {animation-name: rainbow;animation-duration: 4s;}@keyframes rainbow {0% {background-color: blue;}50% {background-color: green;}    100% {background-color: yellow;}}</style>
<div id="rect"></div>

43. 应用视觉设计：使用CSS动画更改按钮的悬停状态

你可以在按钮悬停时使用@keyframes改变按钮的颜色。

下面是在图片悬停时改变图片宽度的例子：

注意ms代表毫秒，1000ms 等于 1s。

使用@keyframes来改变button元素的background-color，使其当悬停时变成#4791d0。@keyframes规则应该只有一个100%条目。

<style>button {border-radius: 5px;color: white;background-color: #0F5897;padding: 5px 10px 8px 10px;}button:hover {animation-name: background-color;animation-duration: 500ms;}@keyframes background-color {100% {background-color: #4791d0;}}
</style><button>注册</button>

45. 应用视觉设计：修改动画的填充模式

太棒了，但是现在还不完美。注意动画在500ms之后重置了，所以按钮又变成了之前的颜色。而我们想要的效果是按钮在悬停时始终高亮。

这可以通过把animation-fill-mode设置成forwards来实现。animation-fill-mode指定了在动画结束时元素的样式。你可以向这样设置它：

animation-fill-mode: forwards;

设置button:hover的animation-fill-mode，使按钮悬停时保持高亮。

<style>button {border-radius: 5px;color: white;background-color: #0F5897;padding: 5px 10px 8px 10px;}button:hover {animation-name: background-color;animation-duration: 500ms;/* add your code below this line */animation-fill-mode: forwards;/* add your code above this line */}@keyframes background-color {100% {background-color: #4791d0;}}
</style>
<button>注册</button>

46. 应用视觉设计：使用 CSS 动画创建运动

当元素的position被指定，如fixed或者relative时，CSS 偏移属性right、left、top和bottom可以用在动画规则里创建动作。

就像下面的例子展示的那样，你可以在50%keyframe 处设置top属性为 50px， 在开始（0%）和最后（100%）keframe 处设置为 0px，以产生项目向下运动，然后返回的动作效果。

@keyframes rainbow {
0% {
background-color: blue;
top: 0px;
}
50% {
background-color: green;
top: 50px;
}
100% {
background-color: yellow;
top: 0px;
}
}

让div水平运动。使用left偏移属性，添加@keyframes规则，让 rainbow 在0%的 0 像素开始，在50%时移动到 25 像素，在100%时时移动到 -25 像素。不要替换编辑器里的top属性，动画应该同时向水平和竖直方向运动。

<style>div {height: 40px;width: 70%;background: black;margin: 50px auto;border-radius: 5px;position: relative;}#rect {animation-name: rainbow;animation-duration: 4s;
}@keyframes rainbow {0% {background-color: blue;top: 0px;left: 0px;}50% {background-color: green;top: 50px;left: 25px;}100% {background-color: yellow;top: 0px;left: -25px;}
}
</style><div id="rect"></div>

47. 应用视觉设计：通过从左到右淡化元素来创建视觉方向

在本关里，你将要改变动画元素的opacity，使其在到达屏幕右侧时渐隐。

在展示的动画里，具有渐变背景的圆形元素在 50% 标记的@keyframes规则处向右移动。

使用 id 选择器选择 id 为ball的元素，在50%里添加opacity属性并赋值 0.1，使其在向右移动时渐隐。

<style>#ball {width: 70px;height: 70px;margin: 50px auto;position: fixed;left: 20%;border-radius: 50%;background: linear-gradient(35deg,#ccffff,#ffcccc);animation-name: fade;animation-duration: 3s;}@keyframes fade {50% {left: 60%;opacity: 0.1;}}</style><div id="ball"></div>

48. 应用视觉设计：使用无限的动画计数制作永不停止的动画

之前的关卡里介绍了一些动画属性以及@keyframes规则的用法。还有一个常用的动画属性是animation-iteration-count，这个属性允许你控制动画循环的次数。下面是一个例子：

animation-iteration-count: 3;

在这里动画会在运行 3 次后停止，如果想让动画一直运行，可以把值设置成 infinite。

把animation-iteration-count属性改成 infinite，以使右边的球持续跳跃。

<style>#ball {width: 100px;height: 100px;margin: 50px auto;position: relative;border-radius: 50%;background: linear-gradient(35deg,#ccffff,#ffcccc);animation-name: bounce;animation-duration: 1s;animation-iteration-count: 3;animation-iteration-count: infinite;}@keyframes bounce{0% {top: 0px;}50% {top: 249px;width: 130px;height: 70px;}100% {top: 0px;}}
</style>
<div id="ball"></div>

49. 应用视觉设计：使用无限的动画计数制作 CSS 心跳

这也是一个用animation-iteration-count属性创造持续动画的例子，它基于前面关卡创建的心形。

心跳动画的每一秒包含两个部分。heart元素（包括:before和:after）使用transform属性改变其大小，背景div使用background属性改变其颜色。

给backclass和heartclass添加值为 infinite 的animation-iteration-count属性，使心脏持续跳动。heart:before和heart:after选择器不需要添加动画属性。

<style>.back {position: fixed;padding: 0;margin: 0;top: 0;left: 0;width: 100%;height: 100%;background: white;animation-name: backdiv;animation-duration: 1s; animation-iteration-count: infinite;}.heart {position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;background-color: pink;height: 50px;width: 50px;transform: rotate(-45deg);animation-name: beat;animation-duration: 1s;animation-iteration-count: infinite;}.heart:after {background-color: pink;content: "";border-radius: 50%;position: absolute;width: 50px;height: 50px;top: 0px;left: 25px;}.heart:before {background-color: pink;content: "";border-radius: 50%;position: absolute;width: 50px;height: 50px;top: -25px;left: 0px;}@keyframes backdiv {50% {background: #ffe6f2;}}@keyframes beat {0% {transform: scale(1) rotate(-45deg);}50% {transform: scale(0.6) rotate(-45deg);}}</style>
<div class="back"></div>
<div class="heart"></div>

50. 应用视觉设计：以可变速率来给元素添加动画

改变相似元素的动画频率的方法有很多。目前接触到的就有animation-iteration-count和@keyframes。

举例说明，右边的动画包含了两个小星星，每个小星星都在 20%@keyframes处变小并且 opacity 变为 20%，也就是一闪一闪的动画效果。你可以通过改变其中一个星星的@keyframes规则以使两个小星星以不同的频率闪烁。

通过改变 class 为star-1的元素的@keyframes为 50% 以改变其动画频率。

<style>.stars {background-color: white;height: 30px;width: 30px;border-radius: 50%;animation-iteration-count: infinite;}.star-1 {margin-top: 15%; margin-left: 60%;animation-name: twinkle-1;animation-duration: 1s;}.star-2 {margin-top: 25%;margin-left: 25%;animation-name: twinkle-2;animation-duration: 1s;}@keyframes twinkle-1 {50% {transform: scale(0.5);opacity: 0.5;}}@keyframes twinkle-2 {20% {transform: scale(0.5);opacity: 0.5;}}#back {position: fixed;padding: 0;margin: 0;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);}
</style><div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>

51. 应用视觉设计：以可变速率来给多个元素添加动画

在前面的关卡里，你通过改变@keyframes改变了两个相似动画元素的频率。你也可以通过改变多个元素的animation-duration来达到同样的效果。

在编辑器代码运行的动画里，天空中有三个以同样频率不停的闪烁的星星。你可以设置每一个星星的animation-duration属性为不同的值来使其具有不同的闪烁频率。

依次设置 class 为star-1、star-2、star-3的animation-duration为 1s、0.9s、1.1s。

<style>.stars {background-color: white;height: 30px;width: 30px;border-radius: 50%;animation-iteration-count: infinite;}.star-1 {margin-top: 15%; margin-left: 60%;animation-duration: 1s;animation-name: twinkle;}.star-2 {margin-top: 25%;margin-left: 25%;animation-duration: 0.9s;animation-name: twinkle;}.star-3 {margin-top: 10%;margin-left: 50%;animation-duration: 1.1s;animation-name: twinkle;}@keyframes twinkle {20% {transform: scale(0.5);opacity: 0.5;}}#back {position: fixed;padding: 0;margin: 0;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);}
</style><div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
<div class="star-3 stars"></div>

52. 应用视觉设计：使用关键字更改动画定时器

在 CSS 动画里，animation-timing-function规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。如果要描述的动画是一辆车在指定时间内（animation-duration）从 A 运动到 B，那么animation-timing-function表述的就是车在运动中的加速和减速等过程。

已经有了很多预定义的值可以直接使用于大部分场景。比如，默认的值是ease，动画以低速开始，然后加快，在结束前变慢。其它常用的值包括ease-out，动画以高速开始，以低速结束;ease-in，动画以低速开始，以高速结束；linear，动画从头到尾的速度是相同的。

给 id 为ball1和ball2的元素添加animation-timing-function，ball1赋值为linear，ball2赋值为ease-out。它们的animation-duration都为 2 秒，注意观察它们在开始和结束时的不同。

<style>.balls {border-radius: 50%;background: linear-gradient(35deg,#ccffff,#ffcccc);position: fixed;  width: 50px;height: 50px;margin-top: 50px;animation-name: bounce;animation-duration: 2s;animation-iteration-count: infinite;}#ball1 { left:27%;animation-timing-function: linear;}#ball2 { left:56%;animation-timing-function: ease-out;}@keyframes bounce {0% {top: 0px;} 100% {top: 249px;}
} </style><div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>

53. 应用视觉设计：学习贝塞尔曲线的原理

上一关卡介绍了animation-timing-function以及它的一些预定义的值。这些值定义了不同时间内的动画速度。除了预定义值之外，CSS 还提供了贝塞尔曲线（Bezier curves）来更出色的控制动画的速度曲线。

在 CSS 动画里，用cubic-bezier来定义贝塞尔曲线。曲线的形状代表了动画的速度。曲线在 1*1 的坐标系统内，曲线的 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。

cubic-bezier函数包含了 1 * 1 网格里的4个点：p0、p1、p2和p3。其中p0和p3是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。在 CSS 里面通过(x1, y1, x2, y2)来确定p1和p2。综上，下面就是 CSS 贝塞尔曲线的例子：

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

在上面的例子里，两个点的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2），如果你还记得初中几何，结果是从原点到点 (1, 1) 的一条直线。动画速度呈线性，效果和linear一致。换言之，元素匀速运动。

对于 id 为ball1的元素，把animation-timing-function属性值从linear变成等价的cubic-bezier函数值。也就是说使用上面例子给的值。

<style>.balls{border-radius: 50%;background: linear-gradient(35deg,#ccffff,#ffcccc);position: fixed;  width: 50px;height: 50px;margin-top: 50px;animation-name: bounce;animation-duration: 2s;animation-iteration-count: infinite;}#ball1 { left: 27%;animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);;}#ball2 { left: 56%;animation-timing-function: ease-out;}@keyframes bounce {0% {top: 0px;} 100% {top: 249px;}
} </style><div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>

54. 应用视觉设计：使用贝塞尔曲线移动图形

前面的关卡涉及的ease-out预定义值描述了动画以高速开始低速结束。右边的动画展示了ease-out预定义值（蓝色的元素）和linear预定义值（红色的元素）的区别。同样的，ease-out预定义值也可以用贝塞尔曲线函数实现。

通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿p1和p2两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的贝塞尔速度曲线。下面是贝塞尔曲线模仿 ease-out 预定义值的例子：

animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

记住所有的cubic-bezier函数都是从坐标为 (0, 0) 的p0开始，在坐标为 (1, 1) 的p3结束。在这个例子里，曲线在 y 轴（从 0 开始，运动到p1的 0，然后运动到p2的 1）上移动的比在 x 轴（从 0 开始，运动到p1的 0，到p2的 0.58）上移动的快。结果是，在这一段动画内元素运动的快。到曲线的结尾，x 和 y 之间的关系反过来了，y 值保持为1，没有变化，x 值从 0.58 变为 1，元素运动的慢。

为了看贝塞尔曲线的运动效果，把 id 为red的元素的animation-timing-function属性赋为cubic-bezier函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。这会使两个元素运动过程类似。

<style>.balls{border-radius: 50%;position: fixed;width: 50px;height: 50px;margin-top: 50px;animation-name: bounce;animation-duration: 2s;animation-iteration-count: infinite;}#red {background: red;left: 27%;animation-timing-function:cubic-bezier(0,0,0.58,1);}#blue {background: blue;left: 56%;animation-timing-function: ease-out;}@keyframes bounce {0% {top: 0px;}100% {top: 249px;}}
</style>
<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>

55. 应用视觉设计：使用贝塞尔曲线让运动更加自然

本关的元素模拟的是杂技抛接球。之前的关卡涉及了linear和ease-out的贝塞尔曲线描述，如你所见，这两个都无法完美的描述杂耍球的运动。在本关里你需要定制贝塞尔曲线。

当animation-iteration-count值为 infinite 时animation-timing-function会自动循环 keyframe。由于是在动画周期中间（50%处）设置的 keyframe 规则，最终的结果是球向上和球向下是两个同样的动画过程。

下面的例子模拟了杂耍球运动：

cubic-bezier(0.3, 0.4, 0.5, 1.6);

注意 y2 的值是大于 1 的。虽然贝塞尔曲线是在 1*1 的坐标系统内 x 值只能在 0 到 1，但是 y 值是可以大于 1 的。这样才能模拟杂耍球运动。

把 id 为green的元素的animation-timing-function值改成cubic-bezier函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。

  #green {background: green;left: 75%;animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);}