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

chore(i18n,learn): processed translations (#45504)

Browse Source
This commit is contained in:
camperbot
2022-03-23 19:52:04 +05:30
committed by GitHub
parent dbb7f309a7
commit 3add6077ad
162 changed files with 2383 additions and 826 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md
View File

@@ -11,13 +11,13 @@ dashedName: add-a-box-shadow-to-a-card-like-element
`box-shadow` 属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。
`box-shadow` 属性的阴影依次由下面这些值描述：
`box-shadow` 属性按顺序采用以下值：
<ul>
<li><code>offset-x</code> 阴影的水平偏移量；</li>
<li><code>offset-y</code> 阴影的垂直偏移量；</li>
<li><code>blur-radius</code> 模糊半径；</li>
<li><code>spread-radius</code> 阴影扩展半径；</li>
<li><code>offset-x</code> （阴影的水平偏移量），</li>
<li><code>offset-y</code> （阴影的垂直偏移量），</li>
<li><code>blur-radius</code></li>
<li><code>spread-radius</code></li>
<li><code>color</code></li>
</ul>

8
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md
View File

@@ -9,7 +9,7 @@ dashedName: adjust-the-hue-of-a-color
# --description--
颜色具有多种特性，包括色相、饱和度和亮度。 CSS3 引入了 `hsl()` 做为颜色的描述方式。
颜色具有多种特性，包括色相、饱和度和亮度。 CSS3 引入了`hsl()`函数，作为直接说明这些特征来挑选颜色的替代方法。
**色相** 是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。 在 `hsl()` 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
@@ -27,19 +27,19 @@ dashedName: adjust-the-hue-of-a-color
# --hints--
应使用 `hsl()` 属性来设置颜色为 `green`。
应使用 `hsl()` 函数来设置颜色为 `green`。
```js
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
```
应使用 `hsl()` 属性来设置颜色为 `cyan`。
应使用 `hsl()` 函数来设置颜色为 `cyan`。
```js
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
```
应使用 `hsl()` 属性来设置颜色为 `blue`。
应使用 `hsl()` 函数来设置颜色为 `blue`。
```js
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));

6
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md
View File

@@ -15,11 +15,11 @@ dashedName: create-a-graphic-using-css
为了创建一个圆形的对象，`border-radius` 应该被设置成 50%。
你应该还记得之前关卡的 `box-shadow` 属性以及它的依次取值 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和颜色值。 其中 `blur-radius` 和 `spread-radius` 是可选的。
你应该还记得之前关卡的 `box-shadow` 属性以及它的依次取值 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和 `color` 值。 其中 `blur-radius` 和 `spread-radius` 是可选的。
# --instructions--
把编辑器里的正方形元素变成新月形状。 首先，把 `background-color` 改为 `transparent`，接着把 `border-radius` 属性设置成 50%，以创建一个圆形。 最后，更改 `box-shadow` 属性，使其 `offset-x` 为 25px，`offset-y` 为 10px，`blur-radius` 为 0，`spread-radius` 为 0，颜色为 `blue`。
把编辑器里的正方形元素变成新月形状。 首先，把 `background-color` 改为 `transparent`，接着把 `border-radius` 属性设置成 50%，以创建一个圆形。 最后，更改 `box-shadow` 属性，使其 `offset-x` 为 25px，`offset-y` 为 10px，`blur-radius` 为 0，`spread-radius` 为 0，`color` 为 `blue`。
# --hints--
@@ -35,7 +35,7 @@ assert(code.match(/background-color:\s*?transparent;/gi));
assert(code.match(/border-radius:\s*?50%;/gi));
```
更改 `box-shadow` 属性，使其 `offset-x` 为 25px，`offset-y` 为 10px，`blur-radius` 为 0，`spread-radius` 为 0，颜色为 `blue`。
更改 `box-shadow` 属性，使其 `offset-x` 为 25px，`offset-y` 为 10px，`blur-radius` 为 0，`spread-radius` 为 0，`color` 为 `blue`。
```js
assert(

10
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md
View File

@@ -28,15 +28,15 @@ dashedName: create-a-more-complex-shape-using-css-and-html
# --instructions--
把屏幕里的元素变成心形。 在 `heart::after` 选择器里，把 `background-color` 改成 `pink`，把 `border-radius` 改成 50%。
把屏幕里的元素变成心形。 在 `.heart::after` 选择器里，把 `background-color` 改成 `pink`，把 `border-radius` 改成 50%。
接下来，用类选择器选取 class 为 `heart`（只是 `heart`）的元素，为它添加 `transform` 属性。 使用 `rotate()` 函数并设置角度为 -45 度。
最后，在 `heart::before` 选择器里面，设置 `content` 属性值为空字符串。
最后，在 `,heart::before` 选择器里面，设置 `content` 属性值为空字符串。
# --hints--
`heart::after` 选择器的 `background-color` 属性值应为 `pink`。
`.heart::after` 选择器的 `background-color` 属性值应为 `pink`。
```js
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
@@ -45,7 +45,7 @@ assert(
);
```
`heart::after` 伪元素的 `border-radius` 属性值应为 50%。
`.heart::after` 伪元素的 `border-radius` 属性值应为 50%。
```js
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
@@ -57,7 +57,7 @@ class 为 `heart` 的元素的 `transform` 属性应使用 `rotate()` 函数并
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
```
`heart::before` 伪元素的 `content` 应为空字符串。
`.heart::before` 伪元素的 `content` 应为空字符串。
```js
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));

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

@@ -11,7 +11,7 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
前面的关卡涉及了使用 `ease-out` 预定义值描述了动画以高速开始低速结束。 右边的动画展示了 `ease-out` 效果（蓝色的元素）和 `linear` 效果（红色的元素）的区别。 同样的，`ease-out` 预定义值也可以用贝塞尔曲线函数实现。
通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿 `p1` 和 `p2` 两个点来拉扯（X 轴的取值区间是 \[0, 1]，Y 轴任意），最后形成的曲线就是动画的贝塞尔速度曲线。 下面是贝塞尔曲线模仿 ease-out 预定义值的例子：
通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿 `p1` 和 `p2` 两个点来拉扯（X 轴的取值区间是 \[0, 1]，Y 轴任意），最后形成的曲线就是动画的贝塞尔速度曲线。 下面是一个使用值来模仿 `ease-out` 样式的 Bezier 曲线示例：
```css
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

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

@@ -47,7 +47,7 @@ assert(!code.match(/90deg/gi));
assert(code.match(/yellow\s+?0(px)?/gi));
```
40px 处的一个渐变颜色应该是 `yellow`。
40 像素处的第一个色标应该是 `yellow`。
```js
assert(code.match(/yellow\s+?40px/gi));