gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(i8n,curriculum): processed translations (#41548)

Browse Source 
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
This commit is contained in:
camperbot
2021-03-21 10:58:20 -06:00
committed by GitHub
parent 9ac00ce25b
commit 7215a6fa77
67 changed files with 332 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md
View File

@@ -11,17 +11,19 @@ dashedName: animate-elements-continually-using-an-infinite-animation-count
之前的关卡里介绍了一些动画属性以及 `@keyframes` 规则的用法。 还有一个常用的动画属性是 `animation-iteration-count`，这个属性允许你控制动画循环的次数。 下面是一个例子：
`animation-iteration-count: 3;`
```css
animation-iteration-count: 3;
```
在这种情况下，动画将在运行 3 次后停止，但可以通过设置该值为 `infinite` 来继续运行动画。
在这里动画会在运行 3 次后停止，如果想让动画一直运行，可以把值设置成 `infinite`。
# --instructions--
把 `animation-iteration-count` 属性值改成 `infinite`，以使右边的球持续跳跃。
把 `animation-iteration-count` 属性改成 `infinite`，使右边的球一直跳跃。
# --hints--
`animation-iteration-count` 属性应有一个值 `infinite`。
`animation-iteration-count` 属性的值应为 `infinite`。
```js
assert($('#ball').css('animation-iteration-count') == 'infinite');

14
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md
View File

@@ -11,21 +11,25 @@ dashedName: create-a-gradual-css-linear-gradient
HTML 元素的背景色并不局限于单色。 CSS 还为我们提供了颜色渐变。 可通过 `background` 里的 `linear-gradient()` 实现线性渐变， 以下是它的语法：
`background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);`
```css
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
```
第一个参数用来表明颜色渐变的初始方向。 它的值是一个角度，比如 `90deg` 代表水平渐变（从左到右），再比如 `45deg` 代表对角线方向的渐变（从左下到右上）。 后续的参数指定了渐变颜色的顺序。
第一个参数指定了颜色过渡的方向——它的值是角度，`90deg` 表示垂直渐变（从左到右），`45deg` 表示沿对角线渐变（从左下方到右上方）。 其他参数指定了渐变颜色的顺序：
例如：
`background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));`
```css
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
```
# --instructions--
使用 `linear-gradient()` 将 `div` 的 `background` 设置为渐变色，渐变的起始角度为 35 度，颜色从 `#CCFFFF` 过渡到 `#FFCCCC`。
使用 `linear-gradient()` 给 `div` 元素添加 `background` 渐变色，渐变角度为 35 度，从 `#CCFFFF` 过渡到 `#FFCCCC`。
# --hints--
`div` 元素应有一个指定方向和颜色的 `linear-gradient` 来设置 `background`。
`div` 元素应有一个指定方向和颜色的 `linear-gradient` `background`。
```js
assert(

12
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md
View File

@@ -15,17 +15,19 @@ dashedName: learn-how-bezier-curves-work
`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);`
```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` 一致。 换言之，元素会匀速运动。
在上面的例子里，两个点的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2）。如果你还记得几何课的知识，结果是从原点到点 (1, 1) 的一条直线。 元素在动画中的速度呈线性，效果和使用 `linear` 关键词的效果一致。 换言之，元素匀速运动。
# --instructions--
对于 id 为 `ball1` 的元素，请把 `animation-timing-function` 属性值从 `linear` 变成等价的 `cubic-bezier` 函数值。 也就是使用上面例子给的值。
对于 id 为 `ball1` 的元素，把 `animation-timing-function` 属性的值从 `linear` 改为等价的 `cubic-bezier` 函数值。 也就是说使用上面例子给的值。
# --hints--
对于 id 为 `ball1` 的元素，请把 `animation-timing-function` 属性值从 linear 变成等价的 `cubic-bezier` 函数值。也就是使用上面例子给的值。
id 为 `ball1` 的元素的 `animation-timing-function` 属性值应该为和 linear 预定值等价的 `cubic-bezier` 函数值。
```js
assert(
@@ -34,7 +36,7 @@ assert(
);
```
id 为 `ball2` 的元素的 `animation-timing-function` 属性值应该保持不变。
id 为 `ball2` 的元素的 `animation-timing-function` 属性值不应改变。
```js
const ball2Animation = __helpers.removeWhiteSpace(

10
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md
View File

@@ -15,17 +15,19 @@ dashedName: make-motion-more-natural-using-a-bezier-curve
下面的例子模拟了杂耍球运动：
`cubic-bezier(0.3, 0.4, 0.5, 1.6);`
```css
cubic-bezier(0.3, 0.4, 0.5, 1.6);
```
注意 y2 的值是大于 1 的。 虽然贝塞尔曲线是在 1 * 1 的坐标系统内 x 值只能取 0 到 1，但是 y 值是可以大于 1 的。 这样我们才能模拟杂耍球运动。
注意 y2 的值是大于 1 的。 虽然贝塞尔曲线是在 1*1 的坐标系统内，x 值只能在 0 到 1，但是 y 值是可以大于 1 的。 这样才能模拟杂耍球运动。
# --instructions--
把 id 为 `green` 的元素的 `animation-timing-function` 值改成 `cubic-bezier` 函数，函数的参数 x1、y1、x2、y2 值依次为 0.311、0.441、0.444、1.649。
把 id 为 `green` 的元素的 `animation-timing-function` 值改成 `cubic-bezier` 函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。
# --hints--
id 为 `green` 的元素的 `animation-timing-function` 属性值应为 `cubic-bezier` 函数，函数的参数 x1、y1、x2、y2 的值依次为 0.311、0.441、0.444、1.649。
id 为 `green` 的元素的 `animation-timing-function` 值应为 `cubic-bezier` 函数，函数的参数 x1，y1，x2，y2 值应为指定值。
```js
assert(

8
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md
View File

@@ -13,15 +13,17 @@ dashedName: modify-fill-mode-of-an-animation
为此，我们可以通过把 `animation-fill-mode` 设置成 `forwards` 来实现。 `animation-fill-mode` 指定了在动画结束时元素的样式： 你可以这样设置：
`animation-fill-mode: forwards;`
```css
animation-fill-mode: forwards;
```
# --instructions--
修改 `button:hover` 的 `animation-fill-mode` 属性值为 `forwards`，使按钮悬停时保持高亮。
设置 `button:hover` 的 `animation-fill-mode` 属性为 `forwards`，使用户把鼠标悬停在按钮上时，按钮保持高亮。
# --hints--
`button:hover` 应该有一个值为 `forwards` 的 `animation-fill-mode` 的属性。
`button:hover` 应有一个值为 `forwards` 的 `animation-fill-mode` 属性。
```js
assert(

14
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md
View File

@@ -13,17 +13,19 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿 `p1` 和 `p2` 两个点来拉扯（X 轴的取值区间是 \[0, 1]，Y 轴任意），最后形成的曲线就是动画的贝塞尔速度曲线。 下面是贝塞尔曲线模仿 ease-out 预定义值的例子：
`animation-timing-function: cubic-bezier(0, 0, 0.58, 1);`
```css
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，元素运动的慢。
记住所有的 `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，元素运动得慢。
# --instructions--
为了能直观地感受贝塞尔曲线所设置的运动效果，请把 id 为 `red` 的元素的 `animation-timing-function` 属性值改为 `cubic-bezier` 函数，其中 x1、y1、x2、y2 值分别为 0、0、0.58、1。 这会使两个元素运动过程类似。
为了看贝塞尔曲线的运动效果，把 id 为 `red` 的元素的 `animation-timing-function` 属性改为 `cubic-bezier` 函数，其中 x1，y1，x2，y2 值分别为 0、0、0.58、1。 这会使两个元素运动过程类似。
# --hints--
id 为 `red` 的元素的 `animation-timing-function` 属性值应使用 `cubic-bezier` 函数，其中 x1、y1、x2、y2 值分别为 0、0、0.58、1。
id 为 `red` 的元素的 `animation-timing-function` 属性应为 `cubic-bezier` 函数，其中 x1、y1、x2、y2 值分别为 0、0、0.58、1。
```js
assert(
@@ -31,13 +33,13 @@ assert(
);
```
id 为 `red` 的元素不应有 `animation-timing-function` 属性值 `linear`。
id 为 `red` 的元素不应有值为 `linear` 的 `animation-timing-function` 属性。
```js
assert($('#red').css('animation-timing-function') !== 'linear');
```
id 为 `blue` 的元素的 `animation-timing-function` 属性不应改变。
id 为 `blue` 的元素的 `animation-timing-function` 属性值不应该改变。
```js
const blueBallAnimation = __helpers.removeWhiteSpace(

20
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md
View File

@@ -17,47 +17,49 @@ dashedName: use-a-css-linear-gradient-to-create-a-striped-element
下面的代码可以帮助理解成对的起止渐变颜色值是如何过渡的。
`0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px`
```css
0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
```
如果有两个相邻色标的颜色值相同，那么过渡看起来就不会很明显。 由于是在两个相同的颜色间过渡，那么中间的过渡色也会是相同颜色，接着就是这个颜色直接过渡到下一个颜色，最终产生的效果就是条纹。
如果每对起止渐变颜色值的颜色都是相同的，由于是在两个相同的颜色间过渡，那么中间的过渡色也为同色，接着就是同色的过渡色和下一个起止颜色，最终产生的效果就是条纹。
# --instructions--
修改 `repeating-linear-gradient()` 函数使其为渐变角度为 `45deg` 的条纹，第一个渐变颜色为 `yellow`, 第二个渐变颜色为 `black`。
使用 `repeating-linear-gradient()` 函数创建一个渐变角度为 `45deg` 的条纹，然后设置第一对渐变颜色为 `yellow`，第二对渐变颜色为 `black`。
# --hints--
`repeating-linear-gradient()` 的渐变角度应该为 45deg。
`repeating-linear-gradient()` 的渐变角度应为 45deg。
```js
assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
```
`repeating-linear-gradient()` 的渐变角度不应为 90deg。
`repeating-linear-gradient()` 的渐变角度应该不再是 90deg。
```js
assert(!code.match(/90deg/gi));
```
0px 处的渐变颜色应该为 `yellow`。
0px 处的渐变颜色应该是 `yellow`。
```js
assert(code.match(/yellow\s+?0(px)?/gi));
```
40px 处的第一个渐变颜色应该为 `yellow`。
40px 处的一个渐变颜色应该是 `yellow`。
```js
assert(code.match(/yellow\s+?40px/gi));
```
40px 处的第二个渐变颜色应该为 `black`。
40px 处的第二个渐变颜色应该是 `black`。
```js
assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
```
80px 处最后一个渐变颜色应该为 `black`。
80px 处的最后一个渐变颜色应该是 `black`。
```js
assert(code.match(/black\s+?80px/gi));