box-shadow属性将一个或多个阴影应用于元素。 box-shadow属性采用offset-x值（从元素水平推动阴影的距离）， offset-y （从元素垂直推动阴影的距离）， blur-radius ， spread-radius和颜色价值，按此顺序。 blur-radius和spread-radius值是可选的。这是一个用于创建具有一些模糊的多个阴影的CSS的示例，大多数是透明的黑色： box-shadow：0 10px 20px rgba（0,0,0,0.19），0 6px 6px rgba（0,0,0,0.23）;
box-shadow 属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。
+box-shadow 属性的阴影依次由下面这些值描述：
+offset-x 阴影的水平偏移量；offset-y 阴影的垂直偏移量；blur-radius 模糊半径；spread-radius 阴影扩展半径；blur-radius 和 spread-radius 是可选的。
+可以通过逗号分隔每个 box-shadow 元素的属性来添加多个 box-shadow。
+如下为添加了模糊效果的例子，它使用了透明度较高的黑色作为阴影：
+
+```css
+box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+```
+
+thumbnail ID。使用此选择器，使用上面的示例CSS值在卡上放置一个box-shadow 。 thumbnail 的 id 属性。把上面的 box-shadow 值赋给卡片。
+thumbnail ID添加box-shadow属性。
- testString: 'assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), "Your code should add a box-shadow property for the thumbnail id.");'
- - text: 您应该使用给定的CSS作为box-shadow值。
- testString: 'assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\),\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), "You should use the given CSS for the box-shadow value.");'
+ - text: '你应该给 id 为 thumbnail 的元素添加 box-shadow 属性。'
+ testString: assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), '你应该给 id 为 thumbnail 的元素添加 box-shadow 属性。');
+ - text: 'box-shadow 值应该是指定的 CSS 值。'
+ testString: 'assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\),\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), ''box-shadow 值应该是指定的 CSS 值。'');'
```
@@ -46,9 +67,9 @@ tests:
text-align: left;
color: black;
}
-
-
-
+
+
+
.fullCard {
width: 245px;
border: 1px solid #ccc;
@@ -68,15 +89,14 @@ tests:
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
+Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
background-color ，而不是调整整体背景或文本颜色以使前景易于阅读。此挑战使用rgba()而不是hex代码或普通rgb() 。 rgba代表：RGB值的范围可以是0到255.α值的范围可以从1（完全不透明或纯色）到0（完全透明或清晰）。
r =红色
g =绿色
b =蓝色
a = alpha /不透明度
rgba()非常适合在这种情况下使用，因为它允许您调整不透明度。这意味着您不必完全阻挡背景。您将使用background-color: rgba(45, 45, 45, 0.1)来应对此挑战。它产生深灰色，在低不透明度值为0.1时几乎是透明的。 background-color 属性。在本挑战里我们将使用 rgba() 颜色，而不是之前学到的 hex 编码或者 rgb() 颜色。
+rgba 代表：+RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。
r = red 红色
g = green 绿色
b = blue 蓝色
a = alpha 透明度
rgba() 非常棒，因为你可以设置颜色的透明度，这意味着你可以做出一些很漂亮的半透明效果。
+在本挑战里你将会用到这个代码 background-color: rgba(45, 45, 45, 0.1)。它表示背景是黑灰色，因为设置了透明度为 0.1，所以几乎是透明的。
+h4元素的background-color调整为给定的rgba()值。同样对于h4 ，删除height属性并添加10px的padding 。 h4 元素的 background-color 属性值为上面指定的 rgba()。
+同时移除 h4 的 height 属性，并添加 padding 属性，值为 10px。
+background-color属性添加到设置为rgba(45, 45, 45, 0.1)的h4元素。'
- testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), "Your code should add a background-color property to the h4 element set to rgba(45, 45, 45, 0.1).");'
- - text: 您的代码应该为h4元素添加padding属性并将其设置为10像素。
- testString: 'assert($("h4").css("padding-top") == "10px" && $("h4").css("padding-right") == "10px" && $("h4").css("padding-bottom") == "10px" && $("h4").css("padding-left") == "10px", "Your code should add a padding property to the h4 element and set it to 10 pixels.");'
- - text: 应删除h4元素上的height属性。
- testString: 'assert(!($("h4").css("height") == "25px"), "The height property on the h4 element should be removed.");'
+ - text: '你应该给 h4 元素添加一个 background-color 属性并且赋值 rgba(45, 45, 45, 0.1)。'
+ testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), ''你应该给 h4 元素添加一个 background-color 属性并且赋值 rgba(45, 45, 45, 0.1)。'');'
+ - text: '你应该给 h4 元素添加一个 padding 属性并且赋值 10px。'
+ testString: assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', '你应该给 h4 元素添加一个 padding 属性并且赋值 10px。');
+ - text: 'h4 元素的 height 属性应该被移除。'
+ testString: assert(!($('h4').css('height') == '25px'), 'h4 元素的 height 属性应该被移除。');
```
@@ -38,8 +47,8 @@ tests:
h4 {
text-align: center;
height: 25px;
-
-
+
+
}
p {
text-align: justify;
@@ -67,15 +76,14 @@ tests:
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
+Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
#09A7A1 ）作为主色，其橙色（ #FF790E ）补充以在视觉上突出显示注册按钮。将header和footer的background-color从黑色更改为青色。然后将h2文本color更改为蓝绿色。最后，将button的background-color更改为橙色。 #09A7A1）做为页面主色，用其补色橙色（#FF790E）来装饰登录按钮。把 header 和 footer 的 background-color 从黑色改成深青色。然后把 h2 的文字 color 也改成深青色。最后，把 button 的 background-color 改成橙色。
+header元素的background-color为＃09A7A1。
- testString: 'assert($("header").css("background-color") == "rgb(9, 167, 161)", "The header element should have a background-color of #09A7A1.");'
- - text: footer元素的background-color为＃09A7A1。
- testString: 'assert($("footer").css("background-color") == "rgb(9, 167, 161)", "The footer element should have a background-color of #09A7A1.");'
- - text: h2元素的color应为＃09A7A1。
- testString: 'assert($("h2").css("color") == "rgb(9, 167, 161)", "The h2 element should have a color of #09A7A1.");'
- - text: button元素的background-color为＃FF790E。
- testString: 'assert($("button").css("background-color") == "rgb(255, 121, 14)", "The button element should have a background-color of #FF790E.");'
+ - text: 'header 元素应该有一个值为 #09A7A1 的 background-color CSS 属性。'
+ testString: assert($('header').css('background-color') == 'rgb(9, 167, 161)', 'header 元素应该有一个值为 #09A7A1 的 background-color CSS 属性。');
+ - text: 'footer 元素应该有一个值为 #09A7A1 的 background-colorCSS 属性。'
+ testString: assert($('footer').css('background-color') == 'rgb(9, 167, 161)', 'footer 元素应该有一个值为 #09A7A1 的 background-color CSS 属性。');
+ - text: 'h2 元素应该有一个值为 #09A7A1 的 color CSS 属性。'
+ testString: assert($('h2').css('color') == 'rgb(9, 167, 161)', 'h2 元素应该有一个值为 #09A7A1 的 color CSS 属性。');
+ - text: 'button 元素应该有一个值为 #FF790E 的 background-color CSS 属性。'
+ testString: assert($('button').css('background-color') == 'rgb(255, 121, 14)', 'button 元素应该有一个值为 #FF790E 的 background-color CSS 属性。');
```
@@ -58,23 +63,22 @@ tests:
}
Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like fetch Pringles.
【freeCodeCamp 成都社区】是一个非营利性的公益性技术社区，由一群编程技术爱好者利用业余时间搭建的一个友好的交流、学习、互助的平台，帮助开发者、技术爱好者提升个人技术能力，同时帮助企业解决人才问题。
+This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.
- +【freeCodeCamp 深圳社区】面向深圳所有有意学习编程、热爱编程、甚至想要通过编程找到一份好工作的学生和社会群众，传承 freeCodeCamp 中文社区的主旨思想，倡导人人皆可编程。
+height属性指定元素的height ，类似于width属性。这是一个将图像高度更改为20px的示例： img {
身高：20px;
}
width 属性类似，你可以使用 CSS 里面的 height 属性来指定元素的高度。下面这个例子把图片的高度设置为 20px：
+
+```css
+img {
+ height: 20px;
+}
+```
+
+height属性添加到h4标记并将其设置为25px。 h4 标签添加 height 属性并设置值为 25px。
+注意： 可能需要将浏览器的缩放比调整为 100% 才能通过这一挑战。
+h4 height属性更改为25像素的值。
- testString: 'assert($("h4").css("height") == "25px", "Your code should change the h4 height property to a value of 25 pixels.");'
+ - text: '你应该设置 h4 的 height 属性，使其值为 25px。'
+ testString: assert($('h4').css('height') == '25px', '你应该设置 h4 的 height 属性，使其值为 25px。');
```
@@ -33,7 +46,7 @@ tests:
-CatPhotoApp
-
+猫咪相册 App
```
@@ -53,7 +65,9 @@ tests:
## Solution
hsl()属性作为通过直接声明这些特征来选择颜色的替代方法。 顺化是人们通常认为的“颜色”。如果您在左侧以红色开始，在中间移动绿色，在右侧移动蓝色，则色调是沿着此线条的颜色。在hsl() ，色调使用色轮概念而不是光谱，其中圆上颜色的角度以0到360之间的值给出。 饱和度是颜色中的灰色量。完全饱和的颜色没有灰色，最低饱和的颜色几乎完全是灰色。这是以100％完全饱和的百分比给出的。 亮度是一种颜色的白色或黑色。给出百分比范围从0％（黑色）到100％（白色），其中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％） |
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%) |
hsl()根据类名（ green ， cyan或blue ）更改每个div元素的background-color 。这三个都应该具有完全饱和度和正常亮度。 green、cyan 和 blue div 的 background-color 使用 hsl() 表示法描述相应的颜色。颜色都为满饱和度，亮度中等。
+hsl()属性将颜色声明为绿色。
- testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the hsl() property to declare the color green.");'
- - text: 您的代码应使用hsl()属性来声明青色。
- testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the hsl() property to declare the color cyan.");'
- - text: 您的代码应使用hsl()属性将颜色声明为蓝色。
- testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the hsl() property to declare the color blue.");'
- - text: 具有green类的div元素应具有green的background-color 。
- testString: 'assert($(".green").css("background-color") == "rgb(0, 255, 0)", "The div element with class green should have a background-color of green.");'
- - text: 具有cyan类的div元素应具有cyan的background-color 。
- testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The div element with class cyan should have a background-color of cyan.");'
- - text: 具有blue类的div元素应具有blue的background-color 。
- testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The div element with class blue should have a background-color of blue.");'
+ - text: '你应该使用 hsl() 属性来表示绿色。'
+ testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), ''你应该使用 hsl() 属性来表示绿色。'');'
+ - text: '你应该使用 hsl() 属性来表示蓝绿色。'
+ testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), ''你应该使用 hsl() 属性来表示蓝绿色。'');'
+ - text: '你应该使用 hsl() 属性来表示蓝色。'
+ testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), ''你应该使用 hsl() 属性来表示蓝色。'');'
+ - text: 'class 为 green 的 div 应该有绿色的 background-color CSS 属性。'
+ testString: assert($('.green').css('background-color') == 'rgb(0, 255, 0)', 'class 为 green 的 div 应该有绿色的 background-color CSS 属性。');
+ - text: 'class 为 cyan 的 div 应该有蓝绿色的 background-color CSS 属性。'
+ testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'class 为 cyan 的 div 应该有蓝绿色的 background-color CSS 属性。');
+ - text: 'class 为 blue 的 div 应该有蓝色的 background-color CSS 属性。'
+ testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'class 为 cyan 的 div 应该有蓝色的 background-color CSS 属性。');
```
@@ -44,30 +54,29 @@ tests:
body {
background-color: #FFFFFF;
}
-
+
.green {
background-color: #000000;
}
-
+
.cyan {
background-color: #000000;
}
-
+
.blue {
background-color: #000000;
}
-
+
div {
display: inline-block;
height: 100px;
width: 100px;
}
-
+
-
```
@@ -79,7 +88,9 @@ tests:
## Solution
h1到h6 ）的字体大小通常应大于段落标记的字体大小。这使用户更容易在视觉上理解页面上所有内容的布局和重要性级别。您可以使用font-size属性调整元素中文本的大小。 h1 到 h6）的文字应该比段落的文字大，这样可以让用户更直观的看到页面的布局，同时能区别出不同元素的重要程度，更方便用户捕捉关键的信息。你可以使用 font-size 属性来设置元素内文字的大小。
+h4标记的font-size更改为27像素。 h4 标签的 font-size改成 27 像素，让标题更醒目。
+font-size属性添加到设置为27像素的h4元素。
- testString: 'assert($("h4").css("font-size") == "27px", "Your code should add a font-size property to the h4 element set to 27 pixels.");'
+ - text: '你应该给 h4 元素添加一个 font-size 属性并且赋值 27px。'
+ testString: assert($('h4').css('font-size') == '27px', '你应该给 h4 元素添加一个 font-size 属性并且赋值 27px。');
```
@@ -35,7 +40,7 @@ tests:
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
-
+
}
p {
text-align: justify;
@@ -63,15 +68,14 @@ tests:
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
+Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
hsl()选项还可以轻松调整颜色的色调。混合白色和纯净的色调会产生这种颜色的色调，添加黑色会产生阴影。或者，通过添加灰色或通过着色和着色来产生色调。回想一下， hsl()的's'和'l'分别代表饱和度和亮度。饱和度百分比会改变灰度，亮度百分比决定颜色中白色或黑色的含量。当您拥有自己喜欢的基色调时，这很有用，但需要不同的变体。 hsl() 使 CSS 更改色调更方便。给纯色添加白色可以创造更浅的色调，添加黑色可以创造更深的色调。另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。回忆下 hsl() 里面的 ‘s’ 和 ‘l’ 分辨代表饱和度和亮度。饱和度代表灰色的占比，亮度代表白色和黑色的占比。这在当你有了一个基色调却需要微调时非常有用。
+header元素继承其background-color 。从该颜色作为基础开始，为nav元素添加background-color ，使其使用相同的青色色调，但具有80％饱和度和25％亮度值，以改变其色调和阴影。 header 的 background-color。改变 nav 元素的 background-color，保留基色蓝绿色，调整它的色调和明暗使它具有 80% 的饱和度以及 25% 的亮度。
+nav元素应使用hsl()属性具有调整后的青色调的background-color 。
- testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), "The nav element should have a background-color of the adjusted cyan tone using the hsl() property.");'
+ - text: 'nav 元素应该有一个使用 hsl() 属性调节蓝绿色调的 background-color CSS 属性。'
+ testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), ''nav 元素应该有一个使用 hsl() 调节蓝绿色调的 background-color CSS 属性。'');'
```
@@ -35,43 +40,44 @@ tests:
background-color: hsl(180, 90%, 35%);
color: #FFFFFF;
}
-
+
nav {
-
+
}
-
+
h1 {
text-indent: 10px;
padding-top: 10px;
}
-
+
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
-
+
nav li {
display: inline;
margin-right: 20px;
}
-
+
a {
text-decoration: none;
color: inherit;
}
-
+
width属性指定元素的width 。值可以以相对长度单位（例如em），绝对长度单位（例如px）或其包含的父元素的百分比给出。这是一个将图像宽度更改为220px的示例： img {
宽度：220px;
}
width 属性来指定元素的宽度。属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。下面这个例子把图片的宽度设置为 220px：
+
+```css
+img {
+ width: 220px;
+}
+```
+
+width属性添加到整个卡并将其设置为绝对值245px。使用fullCard类选择元素。 width 属性，设置它的宽度为 245px。使用 fullCard class 来选择元素。
+fullCard类选择器将卡的width属性更改为245像素。
- testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), "Your code should change the width property of the card to 245 pixels by using the fullCard class selector.");'
+ - text: '你应该使用 fullCard class 选择器将卡片的 width 宽度属性更改为 245px。'
+ testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), ''你应该使用 fullCard class 选择器将卡片的 width 宽度属性更改为 245px。'');'
```
@@ -42,7 +54,7 @@ tests:
text-align: left;
}
.fullCard {
-
+
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
@@ -56,15 +68,14 @@ tests:
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
+Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
animation-iteration-count属性和设置@keyframes规则来实现的。为了说明，右侧的动画由两个“星星”组成，每个“星星”的大小和不透明度在@keyframes规则中的20％标记处@keyframes ，从而创建闪烁动画。您可以更改其中一个元素的@keyframes规则，以便星星以不同的速率闪烁。 animation-iteration-count 和 @keyframes。
+举例说明，右边的动画包含了两个小星星，每个小星星都在 20% @keyframes 处变小并且 opacity 变为 20%，也就是一闪一闪的动画效果。你可以通过改变其中一个星星的 @keyframes 规则以使两个小星星以不同的频率闪烁。
+@keyframes规则更改为50％，更改类名为star-1的元素的动画速率。 star-1 的元素的 @keyframes 为 50% 以改变其动画频率。
+star-1类的@keyframes规则应为50％。
- testString: 'assert(code.match(/twinkle-1\s*?{\s*?50%/g), "The @keyframes rule for the star-1 class should be 50%.");'
+ - text: 'star-1 class 的 @keyframes 规则应该为50%。'
+ testString: assert(code.match(/twinkle-1\s*?{\s*?50%/g), 'star-1class 的 @keyframes 规则应该为50%。');
```
@@ -40,7 +46,7 @@ tests:
}
.star-1 {
- margin-top: 15%;
+ margin-top: 15%;
margin-left: 60%;
animation-name: twinkle-1;
animation-duration: 1s;
@@ -82,7 +88,6 @@ tests:
-
```
@@ -94,7 +99,10 @@ tests:
## Solution
@keyframes规则。另一个动画属性是animation-iteration-count ，它允许您控制循环动画的次数。这是一个例子： animation-iteration-count: 3;在这种情况下，动画将在运行3次后停止，但可以通过将该值设置为无限来使动画连续运行。 @keyframes 规则的用法。还有一个常用的动画属性是 animation-iteration-count，这个属性允许你控制动画循环的次数。下面是一个例子：
+animation-iteration-count: 3;
+在这里动画会在运行 3 次后停止，如果想让动画一直运行，可以把值设置成 infinite。
+animation-iteration-count属性更改为无限。 animation-iteration-count 属性改成 infinite，以使右边的球持续跳跃。
+animation-iteration-count属性应具有无限值。
- testString: 'assert($("#ball").css("animation-iteration-count") == "infinite", "The animation-iteration-count property should have a value of infinite.");'
+ - text: 'animation-iteration-count 属性值应该为 infinite。'
+ testString: assert($('#ball').css('animation-iteration-count') == 'infinite', 'animation-iteration-count 属性值应该为 infinite。');
```
@@ -63,7 +70,6 @@ tests:
}
-
```
@@ -75,7 +81,9 @@ tests:
## Solution
@keyframes规则来更改两个相似动画元素的动画速率。您可以通过操纵多个元素的animation-duration来实现相同的目标。在代码编辑器中运行的动画中，天空中有三个“星星”在连续循环中以相同的速率闪烁。要使它们以不同的速率闪烁，可以将animation-duration属性设置为每个元素的不同值。 @keyframes 改变了两个相似动画元素的频率。你也可以通过改变多个元素的 animation-duration 来达到同样的效果。
+在编辑器代码运行的动画里，天空中有三个以同样频率不停的闪烁的星星。你可以设置每一个星星的 animation-duration 属性为不同的值来使其具有不同的闪烁频率。
+star-1 ， star-2和star-3的元素的animation-duration设置为1s，0.9s和1.1s。 star-1、star-2、star-3 的 animation-duration 为 1s、0.9s、1.1s。
+star-1的星的animation-duration属性应保持为1秒。
- testString: 'assert($(".star-1").css("animation-duration") == "1s", "The animation-duration property for the star with class star-1 should remain at 1s.");'
- - text: star-2的星的animation-duration属性应为0.9秒。
- testString: 'assert($(".star-2").css("animation-duration") == "0.9s", "The animation-duration property for the star with class star-2 should be 0.9s.");'
- - text: star-3的星的animation-duration属性应为1.1秒。
- testString: 'assert($(".star-3").css("animation-duration") == "1.1s", "The animation-duration property for the star with class star-3 should be 1.1s.");'
+ - text: 'class 为 star-1 的 animation-duration 属性值应该 1s。'
+ testString: assert($('.star-1').css('animation-duration') == '1s', 'class 为 star-1 的 animation-duration 属性值应该 1s。');
+ - text: 'class 为 star-2 的 animation-duration 属性值应该 0.9s。'
+ testString: assert($('.star-2').css('animation-duration') == '0.9s', 'class 为 star-2 的 animation-duration 属性值应该 0.9s。');
+ - text: 'class 为 star-3 的 animation-duration 属性值应该 1.1s。'
+ testString: assert($('.star-3').css('animation-duration') == '1.1s', 'class 为 star-3 的 animation-duration 属性值应该 1.1s。');
```
@@ -44,7 +50,7 @@ tests:
}
.star-1 {
- margin-top: 15%;
+ margin-top: 15%;
margin-left: 60%;
animation-duration: 1s;
animation-name: twinkle;
@@ -87,7 +93,6 @@ tests:
-
```
@@ -99,7 +104,9 @@ tests:
## Solution
margin设置为auto值。此方法也适用于图像。默认情况下，图像是内联元素，但在将display属性设置为block时可以更改为块元素。 margin 值设置为 auto。
+同样的，这个方法也对图片奏效。图片默认是内联元素，但是可以通过设置其 display 属性为 block来把它变成块级元素。
+div通过添加在页面上margin属性与汽车的价值。 div 添加值为 auto 的 margin 属性将其居中显示。
+div应该有一个设置为auto的margin 。
- testString: 'assert(code.match(/margin:\s*?auto;/g), "The div should have a margin set to auto.");'
+ - text: 'div 的 margin 应该为 auto。'
+ testString: 'assert(code.match(/margin:\s*?auto;/g), ''div 的 margin 应该为 auto。'');'
```
@@ -35,11 +41,10 @@ tests:
background-color: blue;
height: 100px;
width: 100px;
-
+
}
-
```
@@ -51,7 +56,10 @@ tests:
## Solution
CSS Box Model 。块级项目自动从新行开始（想想标题，段落和div），而内联项目位于周围内容（如图像或跨度）中。以这种方式的元素的默认布局称为文档的normal flow ，但CSS提供position属性来覆盖它。当元素的位置设置为relative ，它允许您指定CSS应如何相对于页面正常流中的当前位置移动它。它与left或right以及top或bottom的CSS偏移属性配对。这些表示将物品从通常定位的位置移开的像素，百分比或ems的数量。以下示例将段落从底部移开10个像素： p {将元素的位置更改为相对位置不会将其从正常流中移除 - 其周围的其他元素仍然表现为该项位于其默认位置。 注意
位置：相对;
底部：10px;
}
盒模型。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的 普通流，同时 CSS 提供了 position 属性来覆盖它。
+当元素的 position 设置为 relative 时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。 CSS 里控制各个方向偏移量的对应的属性是 left、right、top 和 bottom。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems。下面的例子展示了段落向上偏移 10 像素：
+
+```css
+p {
+ position: relative;
+ bottom: 10px;
+}
+```
+
+把元素的 position 设置成 relative 并不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。
+注意h2的position更改为relative position ，并使用CSS偏移将其移动到距离正常流动位置top 15个像素的位置。请注意，周围的h1和p元素的位置没有影响。 h2 的 position 设置成 relative，使用相应的 CSS 属性调整 h2 的位置，使其向下偏移 15 像素，同时还在普通流中占据原来的位置。注意不要对 h1 和 p 元素的位置产生影响。
+h2元素的position属性应设置为relative 。
- testString: 'assert($("h2").css("position") == "relative", "The h2 element should have a position property set to relative.");'
- - text: 您的代码应该使用CSS偏移来相对地将h2 15px定位在远离其正常位置的top 。
- testString: 'assert($("h2").css("top") == "15px", "Your code should use a CSS offset to relatively position the h2 15px away from the top of where it normally sits.");'
+ - text: 'h2 元素应该添加 position 属性并赋值 relative。'
+ testString: assert($('h2').css('position') == 'relative', 'h2 元素应该添加position 属性并赋值 relative。');
+ - text: '你应该使用 CSS 属性调整 h2 的位置使其从原来的位置向下偏移 15px。'
+ testString: assert($('h2').css('top') == '15px', '你应该使用 CSS 属性调整 h2 的位置使其从原来的位置向下偏移 15px。');
```
@@ -34,16 +50,15 @@ tests:
```html
- I still think the h2 is where it normally sits.
+我觉得 h2 没变，还是在它原来的位置，相离莫相忘，且行且珍惜。
- ``` @@ -55,7 +70,9 @@ tests: ## Solutionanimation-timing-function属性控制动画元素在动画持续时间内的变化速度。如果动画是在给定时间（ animation-duration ）从A点移动到B点的汽车，则animation-timing-function表示汽车在行驶过程中如何加速和减速。有许多预定义的关键字可用于热门选项。例如，默认值为ease ，它开始缓慢，在中间加速，然后在最后再次减速。其他选项包括ease-out ，在开始时快速然后减速， ease-in ，在开始时缓慢，然后在结束时加速，或linear ，其在整个过程中应用恒定的动画速度。 animation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。如果要描述的动画是一辆车在指定时间内（animation-duration）从 A 运动到 B，那么 animation-timing-function 表述的就是车在运动中的加速和减速等过程。
+已经有了很多预定义的值可以直接使用于大部分场景。比如，默认的值是 ease，动画以低速开始，然后加快，在结束前变慢。其它常用的值包括 ease-out，动画以高速开始，以低速结束；ease-in，动画以低速开始，以高速结束；linear，动画从头到尾的速度是相同的。
+ball1和ball2 ，一个添加animation-timing-function属性的每个，并设置#ball1至linear ，和#ball2到ease-out 。注意元素在动画期间如何移动但在一起结束之间的区别，因为它们共享相同的animation-duration 2秒。 ball1 和 ball2 的元素添加 animation-timing-function，ball1 赋值为 linear，ball2 赋值为 ease-out。它们的 animation-duration 都为 2 秒，注意观察它们在开始和结束时的不同。
+ball1的元素的animation-timing-function属性的值应该是线性的。
- testString: 'assert($("#ball1").css("animation-timing-function") == "linear", "The value of the animation-timing-function property for the element with the id ball1 should be linear.");'
- - text: 具有id ball2的元素的animation-timing-function属性的ball2应该是缓出的。
- testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the animation-timing-function property for the element with the id ball2 should be ease-out.");'
+ - text: 'id 为 ball1 的元素的 animation-timing-function 属性值应该为 linear。'
+ testString: assert($('#ball1').css('animation-timing-function') == 'linear', 'id 为 ball1 的元素的 animation-timing-function 属性值应该为 linear。');
+ - text: 'id 为 ball2 的元素的 animation-timing-function 属性值应该为 ease-out。'
+ testString: assert($('#ball2').css('animation-timing-function') == 'ease-out', 'id 为 ball2 的元素的 animation-timing-function 属性值应该为 ease-out。');
```
@@ -41,7 +47,7 @@ tests:
#ccffff,
#ffcccc
);
- position: fixed;
+ position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
@@ -49,29 +55,28 @@ tests:
animation-duration: 2s;
animation-iteration-count: infinite;
}
- #ball1 {
+ #ball1 {
left:27%;
-
+
}
- #ball2 {
+ #ball2 {
left:56%;
-
+
}
@keyframes bounce {
0% {
top: 0px;
- }
+ }
100% {
top: 249px;
}
-}
+}
-
```
@@ -83,7 +88,9 @@ tests:
## Solution
z-index属性可以指定元素彼此堆叠的顺序。它必须是整数（即整数而不是小数），并且元素的z-index属性的较高值会使其在堆栈中的移动值高于具有较低值的值。 z-index 属性指定元素的堆叠次序。z-index 的取值是整数，数值大的元素优先于数值小的元素显示。
+z-index属性添加到类名为first （红色矩形）的元素中，并将其设置为值2，以便覆盖另一个元素（蓝色矩形）。 first 的元素（红色的方块）添加 z-index 属性并赋值为 2，使它显示在蓝色方块的上方。
+first的元素的z-index值应为2。
- testString: 'assert($(".first").css("z-index") == "2", "The element with class first should have a z-index value of 2.");'
+ - text: 'class 为 first 的元素的 z-index 值应该为 2。'
+ testString: assert($('.first').css('z-index') == '2', 'class 为 first 的元素的 z-index 值应该为 2。');
```
@@ -36,11 +41,11 @@ tests:
height: 200px;
margin-top: 20px;
}
-
+
.first {
background-color: red;
position: absolute;
-
+
}
.second {
background-color: blue;
@@ -53,7 +58,6 @@ tests:
-
```
@@ -65,7 +69,9 @@ tests:
## Solution
background属性的linear-gradient()函数访问。这是一般语法： background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);第一个参数指定颜色过渡开始的方向 - 它可以表示为度，其中90deg为垂直渐变，45deg的角度为反斜杠。以下参数指定渐变中使用的颜色顺序。示例： background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255)); background 里面的 linear-gradient() 来实现线性渐变，下面是它的语法：
+background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);
+第一个参数指定了颜色过渡的方向 - 它的值是角度，90deg 代表垂直渐变，45deg 的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序：
+例子：
+background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
+div元素的background使用linear-gradient() ，并从35度的方向设置它以将颜色从#CCFFFF更改为#FFCCCC 。 注意 rgb()或hsl() ，但请为此挑战使用十六进制值。 linear-gradient() 给 div 添加 background 渐变色，渐变角度 35deg，从 #CCFFFF 过渡到 #FFCCCC。
+注意rgb() 或者 hsl()。在本关里请使用 hex 颜色码。
+div元素应具有指定方向和颜色的linear-gradient background 。
- testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), "The div element should have a linear-gradient background with the specified direction and colors.");'
+ - text: 'div 元素应该有一个指定方向和颜色的 linear-gradient background渐变色。'
+ testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), ''div 元素应该有一个指定方向和颜色的 linear-gradient background 渐变色。'');'
```
@@ -31,19 +41,17 @@ tests:
```html
-
```
@@ -55,7 +63,9 @@ tests:
## Solution
box-shadow的box-shadow属性，以及控制元素角落圆度的border-radius属性。您将创建一个圆形透明对象，其阴影略微偏向侧面 - 阴影实际上将是您看到的月亮形状。要创建圆形对象， border-radius属性应设置为50％的值。您可以从之前的挑战中回想一下， box-shadow属性采用offset-x ， offset-y ， blur-radius ， spread-radius和颜色值的值。 blur-radius和spread-radius值是可选的。 box-shadow 属性来设置元素的阴影，border-radius 属性控制元素的圆角边框。
+首先你将会创建一个圆的、透明的对象，它具有模糊阴影并略微向两边递减。如你所见，这个阴影其实就是新月形狀。
+为了创建一个圆形的对象，border-radius 应该被设置成 50%。
+你应该还记得之前关卡的 box-shadow 属性以及它的依次取值 offset-x、offset-y、blur-radius、spread-radius 和颜色值。其中blur-radius 和 spread-radius 是可选的。
+background-color更改为透明，然后将border-radius属性设置为50％以生成圆形。最后，更改box-shadow属性，将offset-x设置为25px， offset-y为10px， blur-radius为0， spread-radius为0，颜色设置为蓝色。 background-color 改为 transparent，接着把 border-radius 属性设置成 50%，以创建一个圆形。最后，更改 box-shadow 属性，使其 offset-x 为 25px，offset-y 为 10px，blur-radius 为 0，spread-radius 为 0，color 为 blue。
+background-color属性的值应设置为transparent 。
- testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the background-color property should be set to transparent.");'
- - text: border-radius属性的值应设置为50% 。
- testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the border-radius property should be set to 50%.");'
- - text: box-shadow属性的值应设置为offset-x为25px， offset-y为10px， blur-radius为0， spread-radius为0，最后为颜色为蓝色。
- testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), "The value of the box-shadow property should be set to 25px for offset-x, 10px for offset-y, 0 for blur-radius, 0 for spread-radius, and finally blue for the color.");'
+ - text: 'background-color 属性应该取值 transparent。'
+ testString: 'assert(code.match(/background-color:\s*?transparent;/gi), ''background-color 属性应该取值 transparent。'');'
+ - text: 'border-radius 属性应该取值 50%。'
+ testString: 'assert(code.match(/border-radius:\s*?50%;/gi), ''border-radius属性应该取值50%。'');'
+ - text: 'box-shadow 属性的 offset-x、offset-y、blur-radius、spread-radius 和 color 应该依次取值25px、10px、0、0 和 blue。'
+ testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), ''box-shadow 属性的 offset-x、offset-y、blur-radius、spread-radius 和 color 应该依次取值25px、10px、0、0 和 blue。'');'
```
@@ -35,8 +44,7 @@ tests:
```html
-
```
@@ -64,7 +71,10 @@ tests:
## Solution
hr标记在其包含元素的宽度上添加水平线。这可用于定义主题更改或直观地分隔内容组。 hr 标签来创建一条宽度撑满父元素的水平线。它一般用来表示文档主题的改变，在视觉上将文档分隔成几个部分。
+h4下面添加一个hr标签，其中包含卡片标题。 注意 hr是一个自动关闭标记，因此不需要单独的结束标记。 h4 下面添加一个 hr 标签。
+注意hr 是自关闭标签，所以不需要一个单独的关闭标签。
+hr标记。
- testString: 'assert($("hr").length == 1, "Your code should add an hr tag to the markup.");'
- - text: hr标签应位于标题和段落之间。
- testString: 'assert(code.match(/<\/h4>\s*?/gi), "The /gi), ' Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。 Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。 I shift up when the #navbar is fixed to the browser window. 当导航条固定在浏览器窗口上时，我会上移。 I still think the h2 is where it normally sits. 我觉得 h2 没变，还是在它原来的位置，相离莫相忘，且行且珍惜。
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ 天地玄黄 宇宙洪荒 日月盈昃 辰宿列张 寒来暑往 秋收冬藏 闰余成岁 律召调阳 云腾致雨 露结为霜 金生丽水 玉出昆冈 剑号巨阙 珠称夜光 果珍李柰 菜重芥姜 海咸河淡 鳞潜羽翔 龙师火帝 鸟官人皇 始制文字 乃服衣裳 推位让国 有虞陶唐 吊民伐罪 周发殷汤 坐朝问道 垂拱平章 爱育黎首 臣伏戎羌 遐迩壹体 率宾归王 鸣凤在树 白驹食场 化被草木 赖及万方 盖此身发 四大五常 恭惟鞠养 岂敢毁伤 女慕贞絜 男效才良 知过必改 得能莫忘 罔谈彼短 靡恃己长 信使可覆 器欲难量 墨悲丝染 诗讃羔羊
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ 天地玄黄 宇宙洪荒 日月盈昃 辰宿列张 寒来暑往 秋收冬藏 闰余成岁 律召调阳 云腾致雨 露结为霜 金生丽水 玉出昆冈 剑号巨阙 珠称夜光 果珍李柰 菜重芥姜 海咸河淡 鳞潜羽翔 龙师火帝 鸟官人皇 始制文字 乃服衣裳 推位让国 有虞陶唐 吊民伐罪 周发殷汤 坐朝问道 垂拱平章 爱育黎首 臣伏戎羌 遐迩壹体 率宾归王 鸣凤在树 白驹食场 化被草木 赖及万方 盖此身发 四大五常 恭惟鞠养 岂敢毁伤 女慕贞絜 男效才良 知过必改 得能莫忘 罔谈彼短 靡恃己长 信使可覆 器欲难量 墨悲丝染 诗讃羔羊
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。 Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。 Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。 Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。 Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。hr tag should come between the title and the paragraph.");'
+ - text: '你应该添加一个 hr 标签。'
+ testString: assert($('hr').length == 1, '你应该添加一个 hr 标签。');
+ - text: 'hr 标签应该在标题和段落之间。'
+ testString: assert(code.match(/<\/h4>\s*?hr 标签应该在标题和段落之间。');
```
@@ -63,15 +70,14 @@ tests:
-
```
@@ -83,7 +89,9 @@ tests:
## Solution
- GoogleAlphabet::before和::after伪元素。这些伪元素用于在所选元素之前或之后添加内容。在以下示例中，使用::before伪元素将矩形添加到具有类heart的元素： .heart :: before {
要使
内容：“”;
背景颜色：黄色;
border-radius：25％;
位置：绝对;
身高：50px;
宽度：70px;
顶部：-50px;
左：5px;
} ::before和::after伪元素正常运行，它们必须具有已定义的content属性。此属性通常用于向所选元素添加照片或文本等内容。当使用::before和::after伪元素创建形状时，仍然需要content属性，但它被设置为空字符串。在上面的示例中，具有heart类的元素具有::before伪元素，该元素分别生成height和width分别为50px和70px的黄色矩形。这个矩形由于其25％的边界半径而具有圆角，并且绝对位于距离left 5px和高于元素top 50px的top 。 ::before 和 ::after 伪类。这些伪类用来在选择元素之前和之后添加一些内容。在下面的例子里，::before 伪类元素用来给 class 为 heart 的元素添加一个正方形。
+
+```css
+.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%，所以长方形为圆角长方形，同时其相对位置为距离 left 5px，以及向 top 偏移 50px。
+heart::after选择器中，将background-color更改为pink，将border-radius更改为50％。接下来，使用类heart （只是heart ）定位元素并填充transform属性。使用-45度的rotate()函数。 （ rotate()工作方式与skewX()和skewY()工作方式相同。最后，在heart::before选择器中，将其content属性设置为空字符串。 heart::after 选择器里面，把 background-color 改成粉色（pink），把 border-radius 改成 50%。
+接下来，在 heart class 选择器（单纯的 heart 元素）里面，完善 transform 属性。使用 rotate() 函数并赋参 -45 度。（rotate()用法和 skewX 以及 skewY 类似）。
+最后，在 heart::before 选择器里面，设置 content 属性为空字符串。
+heart::after选择器的background-color属性应为粉红色。'
- testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The background-color property of the heart::after selector should be pink.");'
- - text: '选择heart::after的heart::after border-radius应为50％。'
- testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The border-radius of the heart::after selector should be 50%.");'
- - text: heart类的transform属性应使用设置为-45度的rotate()函数。
- testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The transform property for the heart class should use a rotate() function set to -45 degrees.");'
- - text: '该content的的heart::before选择应该是一个空字符串。'
- testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The content of the heart::before selector should be an empty string.");'
+ - text: 'heart::after 选择器的 background-color 属性值应该为粉色。'
+ testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), ''heart::after 选择器的 background-color 属性值应该为粉色。'');'
+ - text: 'heart::after 选择器的 border-radius 属性值应该为 50%。'
+ testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, ''heart::after 选择器的 border-radius 属性值应该为 50%。'');'
+ - text: 'heart class 的 transform 属性应该使用 rotate() 函数并赋参为 -45deg。'
+ testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), ''heart class 的 transform 属性应该使用 rotate() 函数并赋参为 -45deg。'');'
+ - text: 'heart::before选择器的content应该为空字符串。'
+ testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|'')\1\s*?;/gi), ''heart::before 选择器的 content 应该为空字符串。'');'
```
@@ -70,8 +93,7 @@ tests:
left: 0px;
}
-
-
+
```
@@ -83,7 +105,9 @@ tests:
## Solution
position （例如fixed或relative ，可以在动画规则中使用right ， left ， top和bottom的CSS偏移属性来创建移动。如下面的示例所示，您可以通过将50%关键帧的top属性设置为50px向下然后向上推动项目，但将第一个（ 0% ）和最后一个（ 100% ）关键帧设置为0px。 @keyframes rainbow {
0％{
背景颜色：蓝色;
顶部：0px;
}
50％{
背景颜色：绿色;
上：50px;
}
100％{
背景颜色：黄色;
顶部：0px;
}
} position 被指定，如 fixed 或者 relative 时，CSS 偏移属性 right、left、top 和 bottom可以用在动画规则里创建动作。
+就像下面的例子展示的那样，你可以在 50%keyframe 处设置 top 属性为 50px， 在开始（0%）和最后（100%）keframe 处设置为 0px，以产生项目向下运动，然后返回的动作效果。
+
+```css
+@keyframes rainbow {
+ 0% {
+ background-color: blue;
+ top: 0px;
+ }
+ 50% {
+ background-color: green;
+ top: 50px;
+ }
+ 100% {
+ background-color: yellow;
+ top: 0px;
+ }
+}
+```
+
+div动画添加水平运动。使用left偏移属性，添加到@keyframes规则，因此彩虹从0% 0像素开始，在50%移动到25像素，在100%以-25像素结束。不要替换编辑器中的top属性 - 动画应该具有垂直和水平运动。 div 水平运动。使用 left 偏移属性，添加 @keyframes 规则，让 rainbow 在 0% 的 0 像素开始，在 50% 时移动到 25 像素，在 100% 时时移动到 -25 像素。不要替换编辑器里的 top 属性，动画应该同时向水平和竖直方向运动。
+0%的@keyframes规则应使用0px的left偏移量。
- testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi), "The @keyframes rule for 0% should use the left offset of 0px.");'
- - text: 50%的@keyframes规则应该使用25px的left偏移量。
- testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), "The @keyframes rule for 50% should use the left offset of 25px.");'
- - text: 100%的@keyframes规则应使用-25px的left偏移量。
- testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi), "The @keyframes rule for 100% should use the left offset of -25px.");'
+ - text: '0% 的 @keyframes 规则应该为向 left 偏移 0px。'
+ testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0px;\s*?left:\s*?0px;\s*?}/gi), ''0% 的 @keyframes 规则应该为向 left 偏移 0px。'');'
+ - text: '50% 的 @keyframes 规则应该为向 left 偏移25px。'
+ testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), ''50% 的 @keyframes 规则应该为向left 偏移 25px。'');'
+ - text: '100% 的 @keyframes 规则应该为向 left 偏移-25px。'
+ testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0px;\s*?left:\s*?-25px;\s*?}/gi), ''100% 的 @keyframes 规则应该为向left 偏移 -25px。'');'
```
@@ -53,23 +77,22 @@ tests:
0% {
background-color: blue;
top: 0px;
-
+
}
50% {
background-color: green;
top: 50px;
-
+
}
100% {
background-color: yellow;
top: 0px;
-
+
}
}
-
```
@@ -81,7 +104,10 @@ tests:
## Solution
background属性支持url()函数，以便链接到所选纹理或图案的图像。链接地址用括号内的引号括起来。 background 属性支持使用 url() 函数通过链接的方式引入一个指定纹理或样式的图片。图片链接地址在括号内，一般会用引号包起来。
+https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png的网址，使用body选择器设置整个页面的background 。 body 选择器设置整个页面的 background 为 url https://i.imgur.com/MJAkxbh.png 指定的图片。
+body元素应该将background属性设置为具有给定链接的url() 。
- testString: 'assert(code.match(/background:\s*?url\(\s*("|"|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi), "Your body element should have a background property set to a url() with the given link.");'
+ - text: 'body 元素选择器应包含 background 属性，且值为给定的 url。'
+ testString: 'assert(code.match(/background:\s*?url\(\s*("|''|)https:\/\/i\.imgur\.com\/MJAkxbh\.png\1\s*\)/gi), ''body 元素选择器应包含 background 属性，且值为给定的 url。'');'
```
@@ -32,10 +37,9 @@ tests:
```html
-
```
@@ -47,7 +51,9 @@ tests:
## Solution
text-align属性text-align 。 text-align: justify;导致除最后一行之外的所有文本行都与行框的左右边缘相交。 text-align: center;文本text-align: right;右对齐文本和text-align: left; （默认值）左对齐文本。 text-align 属性可以控制文本的对齐方式。
+text-align: justify; 可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。
+text-align: center; 可以让文本居中对齐。
+text-align: right; 可以让文本右对齐。
+text-align: left; 是 text-align 的默认值，它可以让文本左对齐。
+h4标签的文本（称为“Google”）与中心对齐。然后证明段落标记是合理的，其中包含有关Google如何成立的信息。 h4 标签文本，文本内容为 “Google”。两端对齐段落标签文本，文本介绍了 Google 的创立。
+h4标记上的text-align属性将其设置为居中。
- testString: 'assert($("h4").css("text-align") == "center", "Your code should use the text-align property on the h4 tag to set it to center.");'
- - text: 您的代码应使用p标记上的text-align属性将其设置为对齐。
- testString: 'assert($("p").css("text-align") == "justify", "Your code should use the text-align property on the p tag to set it to justify.");'
+ - text: '你应该在 h4 标签上使用 text-align 属性设置文本居中对齐。'
+ testString: assert($('h4').css('text-align') == 'center', '你应该在 h4 标签上使用 text-align 属性设置文本居中对齐。');
+ - text: '你应该在 p 标签上使用 text-align 属性设置文本两端对齐。'
+ testString: assert($('p').css('text-align') == 'justify', '你应该在 p 标签上使用 text-align 属性设置文本两端对齐。');
```
@@ -34,14 +44,14 @@ tests:
```html
-
```
@@ -70,7 +75,10 @@ tests:
## Solution
opacity属性用于调整不透明度，或相反，用于调整项目的透明度。 值1是不透明的，根本不透明。
给定的值将应用于整个元素，无论是具有一定透明度的图像，还是文本块的前景色和背景色。
值0.5是半透明的。
值0完全透明。 opacity 属性用来设置元素的透明度。
+值 1 代表完全不透明。
+透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。
+
值 0.5 代表半透明。
值 0 代表完全透明。links类将锚标记的opacity设置为0.7以选择它们。 links class 选择所有的超链接并设置其 opacity 值为 0.7。
+links类将 a 标记上的opacity属性设置为0.7。
- testString: 'assert.approximately(parseFloat($(".links").css("opacity")), 0.7, 0.1, "Your code should set the opacity property to 0.7 on the anchor tags by selecting the class of links.");'
+ - text: '你应该使用 links class 选择所有的超链接并设置其 opacity 值为 0.7。'
+ testString: assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, '你应该使用 links class 选择所有的超链接并设置其 opacity 值为 0.7。');
```
@@ -43,7 +50,7 @@ tests:
.links {
text-align: left;
color: black;
-
+
}
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
@@ -67,15 +74,14 @@ tests:
-
```
@@ -87,7 +93,9 @@ tests:
## Solution
Alphabet
- 红色（＃FF0000）和青色（＃00FFFF）
这与我们许多人在学校教授的过时的RYB颜色模型不同，后者具有不同的主色和互补色。现代色彩理论使用加性RGB模型（如在计算机屏幕上）和减色CMY（K）模型（如在打印中）。请阅读此处了解有关此复杂主题的更多信息。网上有许多颜色挑选工具可以选择找到颜色的补充。 注意
绿色（＃00FF00）和洋红色（＃FF00FF）
蓝色（＃0000FF）和黄色（＃FFFF00）
对于所有颜色挑战：使用颜色可以是增加页面视觉兴趣的有效方式。但是，不应仅使用颜色作为传达重要信息的唯一方式，因为有视力障碍的用户可能不理解该内容。应用辅助功能挑战中将更详细地介绍此问题。 红色（#FF0000）和蓝绿色 (#00FFFF)
+现在很多的在线选色工具都有寻找补色的功能。
+注意
绿色（#00FF00）和品红色（#FF00FF）
蓝色（#0000FF）和黄色（#FFFF00）
对于所有的颜色关卡： 颜色能吸引用户的注意，但不是唯一的方式，切勿喧宾夺主，过度使用会适得其反。详细会在应用无障碍章节介绍。
+blue和yellow类的background-color属性更改为各自的颜色。注意颜色与白色背景相比看起来彼此不同。 blue 和 yellow class 的 background-color 属性改成相应的颜色。注意观察它们之间的编码区别以及和它们和白色的编码区别。
+blue类的div元素应具有blue的background-color 。
- testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The div element with class blue should have a background-color of blue.");'
- - text: 类yellow的div元素应该具有yellow的background-color 。
- testString: 'assert($(".yellow").css("background-color") == "rgb(255, 255, 0)", "The div element with class yellow should have a background-color of yellow.");'
+ - text: 'class 为 blue 的 div 元素应该有值为蓝色的 background-color CSS 属性。'
+ testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'class 为 blue 的 div 元素应该有值为蓝色的 background-color CSS 属性。');
+ - text: 'class 为 yellow 的 div 元素应该有值为黄色的 background-color CSS 属性。'
+ testString: assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)', 'class 为 yellow 的 div 元素应该有值为黄色的 background-color CSS 属性。');
```
@@ -50,7 +60,6 @@ tests:
-
```
@@ -62,7 +71,9 @@ tests:
## Solution
颜色 Hex代码 橙子 ＃FF7D00 青色 ＃00FFFF 覆盆子 ＃FF007D
+颜色 HEX 颜色码 橙色 #FF7D00 蓝绿色 #00FFFF 树莓红 #FF007D orange ， cyan和raspberry类的background-color属性更改为各自的颜色。确保使用十六进制代码，因为橙色和覆盆子不是浏览器识别的颜色名称。 orange、cyan 和 rasberry 的 background-color 改成其对应的颜色。由于 rasberry 不在浏览器 17 种标准色之内，不能直接用作颜色名，所以要使用 HEX 颜色码。
+orange等级的div元素应具有orange的background-color 。
- testString: 'assert($(".orange").css("background-color") == "rgb(255, 125, 0)", "The div element with class orange should have a background-color of orange.");'
- - text: 具有cyan类的div元素应具有cyan的background-color 。
- testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The div element with class cyan should have a background-color of cyan.");'
- - text: 具有类raspberry的div元素应该具有raspberry的background-color 。
- testString: 'assert($(".raspberry").css("background-color") == "rgb(255, 0, 125)", "The div element with class raspberry should have a background-color of raspberry.");'
+ - text: 'class 为 orange 的 div 应该有值为橙色的 background-color CSS 属性。'
+ testString: assert($('.orange').css('background-color') == 'rgb(255, 125, 0)', 'class 为 orange 的 div 应该有值为橙色的 background-color CSS 属性。');
+ - text: 'class 为 cyan 的 div 应该有值为蓝绿色的 background-color CSS 属性。'
+ testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'class 为 cyan 的 div 应该有值为蓝绿色的 background-color CSS 属性。');
+ - text: 'class 为 raspberry 的 div 应该有值为树莓红色的 background-color CSS 属性。'
+ testString: assert($('.raspberry').css('background-color') == 'rgb(255, 0, 125)', 'class 为 raspberry 的 div 应该有值为树莓红色的 background-color CSS 属性。');
+ - text: 'corlor classes 里的所有的 background-color 应该是 HEX 颜色码而不是颜色名称。'
+ testString: assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
```
@@ -38,30 +49,29 @@ tests:
body {
background-color: #FFFFFF;
}
-
+
.orange {
background-color: #000000;
}
-
+
.cyan {
background-color: #000000;
}
-
+
.raspberry {
background-color: #000000;
}
-
+
div {
height: 100px;
width: 100px;
margin-bottom: 5px;
}
-
+
-
```
@@ -73,7 +83,9 @@ tests:
## Solution
animation-timing-function属性和一些在其持续时间内改变动画速度的关键字。 CSS提供了除关键字之外的选项，通过使用贝塞尔曲线，可以更好地控制动画的播放方式。在CSS动画中，贝塞尔曲线与cubic-bezier函数一起使用。曲线的形状表示动画的播放方式。曲线位于1乘1坐标系上。此坐标系的X轴是动画的持续时间（将其视为时间刻度），Y轴是动画中的变化。 cubic-bezier函数由四个主要点组成，这些点位于1 x 1网格上： p0 ， p1 ， p2和p3 。为您设置p0和p3 - 它们是始终分别位于原点（0,0）和（1,1）的起点和终点。您可以为其他两个点设置x和y值，并将它们放置在网格中的位置决定了要遵循的动画曲线的形状。这是在CSS中通过以下形式声明p1和p2 “锚”点的x和y值来完成的： (x1, y1, x2, y2) 。将它们全部拉到一起，这里是CSS代码中Bezier曲线的一个例子： 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关键字相同。换句话说，它以恒定的速度变化。 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 一致。换言之，元素匀速运动。
+ball1的元素，将animation-timing-function属性的值从linear更改为其等效的cubic-bezier函数值。使用上面示例中给出的点值。 ball1 的元素，把 animation-timing-function 属性值从 linear 变成等价的 cubic-bezier 函数值。也就是说使用上面例子给的值。
+ball1的元素的animation-timing-function属性的值应该是线性等效的cubic-bezier函数。
- testString: 'assert($("#ball1").css("animation-timing-function") == "cubic-bezier(0.25, 0.25, 0.75, 0.75)", "The value of the animation-timing-function property for the element with the id ball1 should be the linear-equivalent cubic-bezier function.");'
- - text: 具有id ball2的元素的animation-timing-function属性的ball2不应更改。
- testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the animation-timing-function property for the element with the id ball2 should not change.");'
+ - text: 'id 为 ball1 的元素的 animation-timing-function 属性值应该为和 linear 预定值等价的贝塞尔函数值。'
+ testString: assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)', 'id 为 ball1 的元素的 animation-timing-function 属性应该为和 linear 预定值等价的贝塞尔函数值。');
+ - text: 'id 为 ball2 元素的 animation-timing-function 属性值应该保持不变。'
+ testString: assert($('#ball2').css('animation-timing-function') == 'ease-out', 'id 为 ball2 元素的 animation-timing-function 属性值应该保持不变。');
```
@@ -41,7 +50,7 @@ tests:
#ccffff,
#ffcccc
);
- position: fixed;
+ position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
@@ -49,11 +58,11 @@ tests:
animation-duration: 2s;
animation-iteration-count: infinite;
}
- #ball1 {
+ #ball1 {
left: 27%;
animation-timing-function: linear;
}
- #ball2 {
+ #ball2 {
left: 56%;
animation-timing-function: ease-out;
}
@@ -61,17 +70,16 @@ tests:
@keyframes bounce {
0% {
top: 0px;
- }
+ }
100% {
top: 249px;
}
-}
+}
-
```
@@ -83,7 +91,9 @@ tests:
## Solution
@keyframes规则。动画属性控制动画的行为方式， @keyframes规则控制动画期间发生的事情。总共有八个动画属性。这个挑战将保持简单，并首先覆盖两个最重要的： animation-name设置animation-name ，后来@keyframes使用@keyframes来告诉CSS哪些规则与哪些动画一起使用。 animation-duration设置animation-duration长度。 @keyframes是如何准确指定动画在整个持续时间内发生的事情。这是通过在动画期间为特定“帧”提供CSS属性来完成的，百分比范围为0％到100％。如果将其与电影进行比较，则0％的CSS属性是元素在开场场景中的显示方式。 100％的CSS属性是元素在信用点滚动之前的结尾显示的方式。然后CSS应用魔法在给定的持续时间内转换元素以执行场景。这是一个例子来说明@keyframes和动画属性的用法： #anim {
对于具有
动画名称：多彩;
动画持续时间：3s;
}
@keyframes colorful {
0％{
背景颜色：蓝色;
}
100％{
背景颜色：黄色;
}
} anim ID的元素，上面的代码片段将animation-name为colorful ，并将animation-duration为3秒。然后@keyframes规则链接到名称为colorful的动画属性。它在动画开始时将颜色设置为蓝色（0％），在动画结束时将其转换为黄色（100％）。您不仅限于开始 - 结束转换，您可以为0％和100％之间的任何百分比设置元素的属性。 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 和动画属性的用法：
+
+```css
+#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% 间的任意百分比你都可以设置。
+
+animation-name设置为rainbow并将animation-duration为4秒，为id为rect的元素创建动画。接下来，声明一个@keyframes规则，并将动画开头的background-color （ 0% ）设置为蓝色，将动画的中间（ 50% ）设置为绿色，将动画的结尾（ 100% ）设置为黄色。 rect 的元素添加动画，设置其 animation-name 为 rainbow，设置其 animation-duration 为 4 秒。然后声明 @keyframes 规则，设置动画开始时（0%）的 background-color 为蓝色，动画中间时（50%）为绿色，动画结束时（100%）为为黄色。
+rect的元素应该有一个animation-name属性，其值为rainbow。
- testString: 'assert($("#rect").css("animation-name") == "rainbow", "The element with id of rect should have an animation-name property with a value of rainbow.");'
- - text: id为rect的元素应该具有值为4s的animation-duration属性。
- testString: 'assert($("#rect").css("animation-duration") == "4s", "The element with id of rect should have an animation-duration property with a value of 4s.");'
- - text: @keyframes规则应该使用rainbow的animation-name 。
- testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), "The @keyframes rule should use the animation-name of rainbow.");'
- - text: 彩虹的@keyframes规则应使用0％的蓝色background-color 。
- testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), "The @keyframes rule for rainbow should use a background-color of blue at 0%.");'
- - text: 彩虹的@keyframes规则应使用50％的绿色background-color 。
- testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), "The @keyframes rule for rainbow should use a background-color of green at 50%.");'
- - text: 彩虹的@keyframes规则应使用100％的黄色background-color 。
- testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), "The @keyframes rule for rainbow should use a background-color of yellow at 100%.");'
+ - text: 'id 为 rect 的元素应该有一个值为 rainbow 的 animation-name 属性。'
+ testString: assert($('#rect').css('animation-name') == 'rainbow', 'id 为 rect 的元素应该有一个值为 rainbow 的 animation-name 属性。');
+ - text: 'id 为 rect 的元素应该有一个值为 4s 的 animation-duration 属性。'
+ testString: assert($('#rect').css('animation-duration') == '4s', 'id 为 rect 的元素应该有一个值为 4s 的 animation-duration 属性。');
+ - text: '@keyframes 规则的 animation-name 应该为 rainbow。'
+ testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g), '@keyframes 规则的 animation-name 应该为 rainbow。');
+ - text: '@keyframes 规则的 rainbow 在 0% 时的 background-color 应该为蓝色。'
+ testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), ''@keyframes 规则的 rainbow 在 0% 时的 background-color 应该为蓝色。'');'
+ - text: '@keyframes 规则的 rainbow 在 50% 时的 background-color 应该为绿色。'
+ testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), ''@keyframes 规则的 rainbow 在 50% 时的 background-color 应该为绿色。'');'
+ - text: '@keyframes 规则的 rainbow 在 100% 时的 background-color 应该为黄色。'
+ testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), ''@keyframes 规则的 rainbow 在 100% 时的 background-color 应该为黄色。'');'
```
@@ -50,16 +77,15 @@ tests:
}
#rect {
-
-
+
+
}
-
-
-
-
+
+
+
+
-
```
@@ -71,7 +97,9 @@ tests:
## Solution
position属性的下一个选项是absolute ，它将元素相对于其父容器锁定到位。与relative位置不同，这会从文档的正常流中移除元素，因此周围的项会忽略它。 CSS偏移属性（顶部或底部和左侧或右侧）用于调整位置。具有绝对定位的一个细微差别在于它将相对于其最近定位的祖先被锁定。如果您忘记向父项添加位置规则（通常使用position: relative; ），浏览器将继续查找链并最终默认为body标记。 position 属性的取值选项 absolute，absolute 相对于其包含块定位。和 relative 定位不一样，absolute 定位会将元素从当前的文档流里面移除，周围的元素会忽略它。可以用 CSS 的 top、bottom、left 和 right 属性来调整元素的位置。
+absolute 定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是 position:relative;）,浏览器会继续寻找直到默认的 body 标签。
+position声明为absolute将#searchbar元素锁定到其section的右上角。给它每个50像素的top和right偏移。 position 为 absolute，固定 #searchbar 元素到它父元素 section 的右上角。即设定其 top 和 right 为 50 像素。
+#searchbar元素的position应设置为absolute 。'
- testString: 'assert($("#searchbar").css("position") == "absolute", "The #searchbar element should have a position set to absolute.");'
- - text: '您的代码应该在#searchbar元素上使用50像素的top CSS偏移量。'
- testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the top CSS offset of 50 pixels on the #searchbar element.");'
- - text: '您的代码应该在#searchbar元素上使用50像素的right CSS偏移量。'
- testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the right CSS offset of 50 pixels on the #searchbar element.");'
+ - text: '#searchbar 元素应当有一个值为 absolute 的 position CSS 属性。'
+ testString: assert($('#searchbar').css('position') == 'absolute', '#searchbar 元素应当有一个值为 absolute 的 position CSS 属性。');
+ - text: '你的 #searchbar 元素应当有值为 50px 的 top CSS 属性。'
+ testString: assert($('#searchbar').css('top') == '50px', '你的 #searchbar 元素应当有值为 50px 的 top CSS 属性。');
+ - text: '你的 #searchbar 元素应当有值为 50px 的 right CSS 属性。'
+ testString: assert($('#searchbar').css('right') == '50px', '你的 #searchbar 元素应当有值为 50px 的 right CSS 属性。');
```
@@ -36,25 +42,24 @@ tests:
```html
- Welcome!
+ 欢迎！
fixed位置，这是一种绝对定位，可以相对于浏览器窗口锁定元素。与绝对定位类似，它与CSS偏移属性一起使用，并且还从文档的正常流中移除元素。其他项目不再“实现”它所处的位置，这可能需要在其他地方进行一些布局调整。 fixed位置和absolute位置之间的一个关键区别是，当用户滚动时，具有固定位置的元素将不会移动。 fixed 定位，它是一种特殊的绝对（absolute）定位，区别是其包含块是浏览器窗口。和绝对定位类似，fixed 定位使用 top、bottom、left 和 right 属性来调整元素的位置，并且会将元素从当前的文档流里面移除，其它元素会忽略它的存在。
+fixed 定位和 absolute 定位的最明显的区别是 fixed 定位元素不会随着屏幕滚动而移动。
+navbar 。将其position更改为fixed ，并将其偏离top 0像素和left 0像素。注意到（没有）对h1位置的影响，它没有被按下以容纳导航栏并且需要单独调整。 navbar 的 id。把它的 position 设置成fixed，设定其 top和 left 为 0 像素。注意观察对 h1 的影响，h1 并没有被导航栏挤下来，而是遮盖住了，为了显示完全需要单独调整h1 的位置。
+#navbar元素的position应设置为fixed 。'
- testString: 'assert($("#navbar").css("position") == "fixed", "The #navbar element should have a position set to fixed.");'
- - text: '您的代码应该使用#navbar元素上0像素的top CSS偏移量。'
- testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the top CSS offset of 0 pixels on the #navbar element.");'
- - text: '您的代码应使用#navbar元素上0像素的left CSS偏移量。'
- testString: 'assert($("#navbar").css("left") == "0px", "Your code should use the left CSS offset of 0 pixels on the #navbar element.");'
+ - text: '>#navbar 元素应当有一个值为 fixed 的 position CSS 属性'
+ testString: assert($('#navbar').css('position') == 'fixed', '#navbar 元素应当有一个值为 fixed 的 position CSS 属性');
+ - text: '你的 #navbar 元素应当有值为 0px 的 top CSS 属性。'
+ testString: assert($('#navbar').css('top') == '0px', '你的 #navbar 元素应当有值为 0px 的 top CSS 属性。');
+ - text: '你的 #navbar 元素应当有值为 0px 的 left CSS 属性。'
+ testString: assert($('#navbar').css('left') == '0px', '你的 #navbar 元素应当有值为 0px 的 left CSS 属性。');
```
@@ -36,9 +42,9 @@ tests:
```html
Welcome!
+ 欢迎!
animation-iteration-count属性的连续动画示例，该属性使用您在之前的挑战中设计的心脏。一秒长的心跳动画由两个动画片段组成。的heart元件（包括:before和:after片）的动画使用改变大小transform特性，并且背景div是动画使用改变其颜色background属性。 animation-iteration-count 属性创造持续动画的例子，它基于前面关卡创建的心形。
+心跳动画的每一秒包含两个部分。heart 元素（包括 :before 和 :after）使用 transform 属性改变其大小，背景 div 使用 background 属性改变其颜色。
+back类和heart类添加animation-iteration-count属性并将值设置为无限来保持心脏跳动。 heart:before和heart:after选择器heart:after不需要任何动画属性。 back class和 heart class添加值为 infinite 的 animation-iteration-count 属性，使心脏持续跳动。heart:before 和 heart:after 选择器不需要添加动画属性。
+heart类的animation-iteration-count属性应具有无限值。
- testString: 'assert($(".heart").css("animation-iteration-count") == "infinite", "The animation-iteration-count property for the heart class should have a value of infinite.");'
- - text: back类的animation-iteration-count属性应具有无限值。
- testString: 'assert($(".back").css("animation-iteration-count") == "infinite", "The animation-iteration-count property for the back class should have a value of infinite.");'
+ - text: 'heart class 的 animation-iteration-count 属性应该赋值 infinte。'
+ testString: assert($('.heart').css('animation-iteration-count') == 'infinite', 'heart class 的 animation-iteration-count 属性应该赋值 infinite。');
+ - text: 'back class 的 animation-iteration-count 属性应该赋值 infinite。'
+ testString: assert($('.back').css('animation-iteration-count') == 'infinite', 'back class 的 animation-iteration-count 属性应该赋值 infinite。');
```
@@ -43,8 +49,8 @@ tests:
height: 100%;
background: white;
animation-name: backdiv;
- animation-duration: 1s;
-
+ animation-duration: 1s;
+
}
.heart {
@@ -60,7 +66,7 @@ tests:
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
-
+
}
.heart:after {
background-color: pink;
@@ -101,7 +107,6 @@ tests:
-
```
@@ -113,7 +118,9 @@ tests:
## Solution
linear和ease-out三次贝塞尔曲线，但两者都没有准确描述杂耍运动。您需要为此自定义Bezier曲线。当animation-iteration-count设置为无限时， animation-timing-function在每个关键帧处自动循环。由于在动画持续时间的中间设置了关键帧规则（ 50% ），因此在球的向上和向下移动时会产生两个相同的动画进度。下面的三次贝塞尔曲线模拟了一个杂耍运动： cubic-bezier(0.3, 0.4, 0.5, 1.6);请注意，y2的值大于1.虽然三次贝塞尔曲线映射在1乘1坐标系上，并且它只能接受0到1的x值，但y值可以设置为大于1的数字。这导致弹跳运动，非常适合模拟杂耍球。 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 的。这样才能模拟杂耍球运动。
+green的元素的animation-timing-function的值更改为cubic-bezier函数，x1，y1，x2，y2值分别设置为0.311,0.441,0.444,1.648。 green 的元素的 animation-timing-function 值改成 cubic-bezier 函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。
+green的元素的animation-timing-function属性的值应该是具有指定的x1，y1，x2，y2值的cubic-bezier函数。
- testString: 'assert($("#green").css("animation-timing-function") == "cubic-bezier(0.311, 0.441, 0.444, 1.649)", "The value of the animation-timing-function property for the element with the id green should be a cubic-bezier function with x1, y1, x2, y2 values as specified.'
+ - text: 'id 为green的元素的animation-timing-function值应该为cubic-bezier函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。'
+ testString: assert($('#green').css('animation-timing-function') == 'cubic-bezier(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。');
```
@@ -33,7 +42,7 @@ tests:
-
-
+
```
@@ -63,7 +69,10 @@ tests:
## Solution
top或bottom ， left或right的CSS偏移告诉浏览器将项目相对于文档正常流程中的位置偏移多远。您将元素偏离给定的点，这会使元素远离引用的边（有效地，相反的方向）。正如您在上一次挑战中看到的那样，使用顶部偏移将h2向下移动。同样，使用左偏移会将项目向右移动。 说明
h2移动15像素向右移动10像素。 测试
tests: - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");' - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.' testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");' 挑战种子
<head> <style> h2 { position: relative; } </style> </head> <body> <h1>On Being Well-Positioned</h1> <h2>Move me!</h2> <p>I still think the h2 is where it normally sits.</p> </body> 解
// solution required top、bottom、left 和 right 定义了元素在相应方位的偏移距离。元素将从当前位置，向属性相反的方向偏移。就像你在上一个挑战看到的，top 属性使 h2 向下移动。left 属性使元素向右移动。
+
+h2移动15像素向右移动10像素。 h2 向上移动 10 像素，向右移动 15 像素。
+h2 10px。换句话说，将它从通常所在位置的bottom移开10px。
- testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the h2 10px upwards. In other words, move it 10px away from the bottom of where it normally sits.");'
- - text: 您的代码应该使用CSS偏移来相对地将h2 15px定位到右侧。换句话说，将它从通常所在的位置left移动15px。
- testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the h2 15px towards the right. In other words, move it 15px away from the left of where it normally sits.");'
+ - text: '你应该使用 CSS 属性使 h2 相对当前位置向上移动 10px。也就是说，从 h2 当前位置远离 bottom 10px。'
+ testString: assert($('h2').css('bottom') == '10px', '你应该使用 CSS 属性使 h2 相对当前位置向上移动 10px。也就是说，从 h2 当前位置远离 bottom 10px。');
+ - text: '你应该使用 CSS 属性使 h2 相对当前位置向右移动 15px。也就是说，从 h2 当前位置远离 left 15px。'
+ testString: assert($('h2').css('left') == '15px', '你应该使用 CSS 属性使 h2 相对当前位置向右移动 15px。也就是说，从 h2 当前位置远离left 15px。');
```
@@ -36,19 +42,20 @@ tests:
- On Being Well-Positioned
- Move me!
- 论如何优雅定位
+ 我要离 h1 近一点！
+ position ，而是设置元素的float属性。浮动元素从文档的正常流中移除，并推送到其包含的父元素的left或right 。它通常与width属性一起使用，以指定浮动元素需要多少水平空间。 position 属性的选项，它通过元素的 float 属性来设置。浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用 width 属性来指定浮动元素占据的水平空间。
+section和aside元素彼此相邻。给#left项float的left和#right项float的right 。 #left 元素的 float 为 left，设置 #right 元素的 float 为 right。使这两个元素按两列布局，section 和 aside 左右排列。
+left的元素的float值应为left 。
- testString: 'assert($("#left").css("float") == "left", "The element with id left should have a float value of left.");'
- - text: id为right的元素的float值应为right 。
- testString: 'assert($("#right").css("float") == "right", "The element with id right should have a float value of right.");'
+ - text: 'id 为 left 的元素应该有一个值为 left 的 float CSS 属性。'
+ testString: assert($('#left').css('float') == 'left', 'id 为 left 的元素应该有一个值为 left 的 float CSS 属性。');
+ - text: 'id 为 right 的元素应该有一个值为 right 的 float CSS 属性。'
+ testString: assert($('#right').css('float') == 'right', 'id 为 right 的元素应该有一个值为 right 的 float CSS 属性。');
```
@@ -35,11 +40,11 @@ tests:
-This is h1 text
-This is h2 text
-This is h3 text
-This is h4 text
-This is h5 text
-This is h6 text
-
+我是 h1 文字
+我是 h2 文字
+我是 h3 文字
+我是 h4 文字
+我是 h5 文字
+我是 h6 文字
```
@@ -66,7 +70,9 @@ tests:
## Solution
font-size属性不限于标题，它可以应用于包含文本的任何元素。 font-size 属性不只限于标题，它可以应用于任何包含文字的元素内。
+font-size属性值更改为16px以使其更加可见。 font-size 设置为 16px 让它看起来更清晰。
+p标签的font-size为16像素。
- testString: 'assert($("p").css("font-size") == "16px", "Your p tag should have a font-size of 16 pixels.");'
+ - text: '你的 p 标签应该包含一个 font-size 属性并且值为 16px。'
+ testString: assert($('p').css('font-size') == '16px', '你的 p 标签应该包含一个 font-size 属性并且值为 16px。');
```
@@ -36,9 +41,8 @@ tests:
}
font-size ，在这里您将调整font-weight 。 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。
+h1 标签的 font-weight 为 800。h2 标签的 font-weight 为 600。h3 标签的 font-weight 为 500。h4 标签的 font-weight 为 400。h5 标签的 font-weight 为 300。h6 标签的 font-weight 为 200。h1标记的font-weight属性设置为800。
- testString: 'assert($("h1").css("font-weight") == "800", "Your code should set the font-weight property for the h1 tag to 800.");'
- - text: 您的代码应将h2标记的font-weight属性设置为600。
- testString: 'assert($("h2").css("font-weight") == "600", "Your code should set the font-weight property for the h2 tag to 600.");'
- - text: 您的代码应将h3标记的font-weight属性设置为500。
- testString: 'assert($("h3").css("font-weight") == "500", "Your code should set the font-weight property for the h3 tag to 500.");'
- - text: 您的代码应将h4标记的font-weight属性设置为400。
- testString: 'assert($("h4").css("font-weight") == "400", "Your code should set the font-weight property for the h4 tag to 400.");'
- - text: 您的代码应将h5标记的font-weight属性设置为300。
- testString: 'assert($("h5").css("font-weight") == "300", "Your code should set the font-weight property for the h5 tag to 300.");'
- - text: 您的代码应将h6标记的font-weight属性设置为200。
- testString: 'assert($("h6").css("font-weight") == "200", "Your code should set the font-weight property for the h6 tag to 200.");'
+ - text: '你应该设置 h1 标签的 font-weight 为 800。'
+ testString: assert($('h1').css('font-weight') == '800', '你应该设置 h1 标签的 font-weight 为 800。');
+ - text: '你应该设置 h2 标签的 font-weight 为 600。'
+ testString: assert($('h2').css('font-weight') == '600', '你应该设置 h2 标签的 font-weight 为 600。');
+ - text: '你应该设置 h3 标签的 font-weight 为 500。'
+ testString: assert($('h3').css('font-weight') == '500', '你应该设置 h3 标签的 font-weight 为 500。');
+ - text: '你应该设置 h4 标签的 font-weight 为 400。'
+ testString: assert($('h4').css('font-weight') == '400', '你应该设置 h4 标签的 font-weight 为 400。');
+ - text: '你应该设置 h5 标签的 font-weight 为 300。'
+ testString: assert($('h5').css('font-weight') == '300', '你应该设置 h5 标签的 font-weight 为 300。');
+ - text: '你应该设置 h6 标签的 font-weight 为 200。'
+ testString: assert($('h6').css('font-weight') == '200', '你应该设置 h6 标签的 font-weight 为 200。');
```
@@ -43,36 +49,35 @@ tests:
-This is h1 text
-This is h2 text
-This is h3 text
-This is h4 text
-This is h5 text
-This is h6 text
-
+我是 h1 文字
+我是 h2 文字
+我是 h3 文字
+我是 h4 文字
+我是 h5 文字
+我是 h6 文字
```
@@ -84,7 +89,9 @@ tests:
## Solution
line-height属性来更改文本块中每一行的高度。顾名思义，它会改变每行文本所获得的垂直空间量。 line-height 属性来设置行间的距离。行高，顾名思义，用来设置每行文字所占据的垂直空间。
+line-height属性添加到p标记并将其设置为25px。 p 标签添加 line-height 属性并赋值 25px。
+p标记的line-height设置为25像素。
- testString: 'assert($("p").css("line-height") == "25px", "Your code should set the line-height of the p tag to 25 pixels.");'
+ - text: '你应该给 p 标签添加 line-height 属性并赋值 25px。'
+ testString: assert($('p').css('line-height') == '25px', '你应该给 p 标签添加 line-height 属性并赋值 25px。');
```
@@ -33,13 +38,12 @@ tests:
ease-out关键字，该关键字描述了动画更改，该动画更改先加速，然后在动画结束时减慢。在右侧，演示了ease-out关键字（对于蓝色元素）和linear关键字（对于红色元素）之间的差异。通过使用自定义三次贝塞尔曲线函数，可以实现对ease-out关键字的类似动画进展。通常，更改p1和p2锚点会驱动创建不同的贝塞尔曲线，这些曲线控制动画随时间推移的进展。下面是使用值来模拟缓出样式的贝塞尔曲线的示例： animation-timing-function: cubic-bezier(0, 0, 0.58, 1);请记住，所有cubic-bezier函数都以（0,0）处的p0开始，并以（1,1）处的p3结束。在这个例子中，曲线移动通过Y轴（从0开始，到p1 y值为0，然后到p2 y值为1）比在X轴上移动更快（0开始，然后是0对于p1 ，对于p2 ，高达0.58）。结果，动画元素的变化比该段的动画时间更快。接近曲线的末端，x和y值的变化之间的关系反转 - y值从1移动到1（无变化），x值从0.58移动到1，使得动画变化进展比较慢动画持续时间。 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，元素运动的慢。
+red的元素的animation-timing-function更改为cubic-bezier函数，其中x1，y1，x2，y2值分别设置为0,0,0.58,1这将使两个元素同样在动画中前进。 red 的元素的 animation-timing-function 属性赋为 cubic-bezier 函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。这会使两个元素运动过程类似。
+red的元素的animation-timing-function属性值应为cubic-bezier函数，x1，y1，x2，y2值分别设置为0,0,0.58,1。'
- testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the animation-timing-function property of the element with the id red should be a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");'
- - text: id为red的元素不应该具有linear的animation-timing-function属性。
- testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id red should no longer have the animation-timing-function property of linear.");'
- - text: 具有id blue的元素的animation-timing-function属性的值不应更改。
- testString: 'assert($("#blue").css("animation-timing-function") == "ease-out", "The value of the animation-timing-function property for the element with the id blue should not change.");'
+ - text: 'id 为 red 的元素的 animation-timing-function 属性应当赋为 cubic-bezier 函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。'
+ testString: assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)', 'id 为 red 的元素的 animation-timing-function 属性应当赋为 cubic-bezier 函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。');
+ - text: 'id 为 red 的元素的 animation-timing-function 属性不应该取值 linear。'
+ testString: assert($('#red').css('animation-timing-function') !== 'linear', 'id 为 red 的元素的 animation-timing-function 属性不应该取值 linear。');
+ - text: 'id 为 blue 的元素的 animation-timing-function 属性不应该被改变。'
+ testString: assert($('#blue').css('animation-timing-function') == 'ease-out', 'id 为 blue 的元素的 animation-timing-function 属性不应该被改变。');
```
@@ -66,7 +74,6 @@ tests:
-
```
@@ -78,7 +85,9 @@ tests:
## Solution
repeating-linear-gradient()函数与linear-gradient()非常相似，主要区别在于它重复指定的渐变图案。 repeating-linear-gradient()接受各种值，但为简单起见，您将在此挑战中使用角度值和颜色停止值。角度值是梯度的方向。颜色停止类似于标记转换发生位置的宽度值，并且以百分比或像素数给出。在代码编辑器中演示的示例中，渐变以0像素处的yellow开始，在距离开始40像素处混合成第二种颜色blue 。由于下一个颜色停止也是40像素，因此渐变立即变为第三颜色green ，其本身混合为第四颜色值red ，因为距离渐变的开始是80像素。对于这个例子，它有助于将颜色停止视为每两种颜色混合在一起的对。 0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px如果每两个颜色停止值是相同的颜色，则混合不明显，因为它在相同的颜色之间，然后是硬转换到下一个颜色，所以你最终得到条纹。 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度的渐变角度来45deg ，然后将前两个颜色停止设置为yellow ，最后将第二个两个颜色停止为black 。 repeating-linear-gradient() 函数使其为渐变角度为 45deg 的条纹，第一对渐变颜色为 yellow, 第二对渐变颜色为 black。
+repeating-linear-gradient()应为45度。
- testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), "The angle of the repeating-linear-gradient() should be 45deg.");'
- - text: repeating-linear-gradient()不应再为90度
- testString: 'assert(!code.match(/90deg/gi), "The angle of the repeating-linear-gradient() should no longer be 90deg");'
- - text: 0像素处的颜色停止应为yellow 。
- testString: 'assert(code.match(/yellow\s+?0(px)?/gi), "The color stop at 0 pixels should be yellow.");'
- - text: 40像素的一个颜色停止应为yellow 。
- testString: 'assert(code.match(/yellow\s+?40px/gi), "One color stop at 40 pixels should be yellow.");'
- - text: 40像素的第二个色标应为black 。
- testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), "The second color stop at 40 pixels should be black.");'
- - text: 80像素的最后一个色标应为black 。
- testString: 'assert(code.match(/black\s+?80px/gi), "The last color stop at 80 pixels should be black.");'
+ - text: 'repeating-linear-gradient() 的渐变角度应该为 45deg。'
+ testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), ''repeating-linear-gradient() 的渐变角度应该为 45deg。'');'
+ - text: 'repeating-linear-gradient() 的渐变角度应该不在是 90deg。'
+ testString: assert(!code.match(/90deg/gi), 'repeating-linear-gradient() 的渐变角度不应该是 90deg。');
+ - text: '0px 处的渐变颜色应该为 yellow。'
+ testString: assert(code.match(/yellow\s+?0px/gi), '0px 处的渐变颜色应该为 yellow。');
+ - text: '40px 处的第一个渐变颜色应该为 yellow。'
+ testString: assert(code.match(/yellow\s+?40px/gi), '40px 处的第一个渐变颜色应该为 yellow。');
+ - text: '40px 处的第二个渐变颜色应该为 black。'
+ testString: assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), '40px 处的第二个渐变颜色应该为 black。');
+ - text: '80px 处最后一个渐变颜色应该为 black。'
+ testString: assert(code.match(/black\s+?80px/gi), '80px 处最后一个渐变颜色应该为 black。');
```
@@ -42,7 +52,7 @@ tests:
```html
-
```
@@ -71,7 +80,9 @@ tests:
## Solution
@keyframes更改悬停状态下按钮的颜色。以下是在悬停时更改图像宽度的示例： <风格>
img：hover {
动画名称：宽度;
动画持续时间：500ms;
}
@keyframes width {
100％{
宽度：40px;
}
}
</样式>
<img src =“https://bit.ly/smallgooglelogo"alt =”Google的徽标“/> @keyframes 改变按钮的颜色。
+下面是在图片悬停时改变图片宽度的例子：
+
+```html
+
+
+
+```
+
+
ms表示毫秒，其中1000毫秒等于1秒。使用CSS @keyframes更改button元素的background-color ，以便当用户将鼠标悬停在其上时变为#4791d0 。 @keyframes规则应该只有100%的条目。 ms 代表毫秒，1000ms 等于 1s。
+使用 @keyframes 来改变 button 元素的 background-color，使其当悬停时变成 #4791d0。@keyframes 规则应该只有一个 100% 条目。
+animation-name background-color。'
- testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), "The @keyframes rule should use the animation-name background-color.");'
- - text: '@keyframes下应该有一条规则将background-color更改为#4791d0为100％。'
- testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), "There should be one rule under @keyframes that changes the background-color to #4791d0 at 100%.");'
+ - text: '@keyframes 规则的 animation-name 应该是 background-color。'
+ testString: assert(code.match(/@keyframes\s+?background-color\s*?{/g), '@keyframes 规则的 animation-name 应该是 background-color。');
+ - text: '在 @keyframes 的 100% 条目里应该把 background-color 改成 #4791d0。'
+ testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), ''在 @keyframes 的 100% 条目里应该把 background-color 改成 #4791d0。'');'
```
@@ -39,17 +64,16 @@ tests:
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
-
+
button:hover {
animation-name: background-color;
animation-duration: 500ms;
}
-
-
+
+
-
-
-
+
+
```
@@ -61,7 +85,9 @@ tests:
## Solution
transform属性的下一个函数是skewX() ，它将选定元素沿其X（水平）轴倾斜给定的度数。以下代码沿X轴将段落元素倾斜-32度。 p {
transform：skewX（-32deg）;
} transform 属性是 skewX，skewX 使选择的元素沿着 X 轴（横向）翻转指定的角度。
+下面的代码沿着 X 轴翻转段落元素 -32 度。
+
+```css
+p {
+ transform: skewX(-32deg);
+}
+```
+
+transform属性将具有bottom id的元素沿X轴倾斜24度。 transform 属性沿 X 轴翻转 id 为 bottom 的元素 24 度。
+bottom的元素应沿其X轴倾斜24度。
- testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), "The element with id bottom should be skewed by 24 degrees along its X-axis.");'
+ - text: 'id 为 bottom 的元素应该沿着 X 轴翻转 24 度。'
+ testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), ''id 为 bottom 的元素应该沿着 X 轴翻转 24 度。'');'
```
@@ -31,7 +44,7 @@ tests:
```html
-
```
@@ -59,7 +71,9 @@ tests:
## Solution
skewX()函数沿X轴将选定元素倾斜给定的度数，则skewY()属性沿Y（垂直）轴倾斜元素skewY()不足为奇了。 skewX 函数使指定元素沿 X 轴翻转指定的角度，想必你已经猜到了，skewY 属性使指定元素沿 Y 轴（垂直方向）翻转指定角度。
+transform属性，沿Y轴倾斜top -10度的元素。 transform 属性沿 Y 轴翻转 id 为 top 的元素 -10 度。
+top的元素应沿其Y轴倾斜-10度。
- testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), "The element with id top should be skewed by -10 degrees along its Y-axis.");'
+ - text: 'id 为 top 的元素应该沿着 Y 轴翻转 -10 度。'
+ testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), ''id 为 top 的元素应该沿着 Y 轴翻转 -10 度。'');'
```
@@ -31,14 +36,14 @@ tests:
```html
-
```
@@ -59,7 +73,10 @@ tests:
## Solution
em标记。这显示文本为斜体，因为浏览器应用了font-style: italic;的CSS font-style: italic;对元素。 em 标签来强调文本。由于浏览器会自动给元素应用 font-style: italic;，所以文本会显示为斜体。
+em标记以强调它。 p 标签里面嵌套 em 标签来强调文本。
+em标记。
- testString: 'assert($("em").length == 1, "Your code should add an em tag to the markup.");'
- - text: em标签应该环绕p标签的内容，而不是p标签本身。
- testString: 'assert($("p").children().length == 1 && $("em").children().length == 2, "The em tag should wrap around the contents of the p tag but not the p tag itself.");'
+ - text: '你应该添加一个 em 标签。'
+ testString: assert($('em').length == 1, '你应该添加一个 em 标签。');
+ - text: 'em 标签应该嵌套在 p 标签里面。'
+ testString: assert($('p').children().length == 1 && $('em').children().length == 2, 'em 标签应该嵌套在 p 标签里面。');
```
@@ -62,15 +68,14 @@ tests:
-
```
@@ -82,7 +87,9 @@ tests:
## Solution
Google
- s标记。它表明一段文字不再有效。使用s标签，浏览器应用text-decoration: line-through;的CSS text-decoration: line-through;对元素。 s 标签来给文字添加删除线，我是明晃晃的删除线，它代表着这段文字不再有效。添加了 s 标签后，浏览器会自动给元素应用 text-decoration: line-through;。
+s标签包裹在h4标签内的“Google”周围，然后在其旁边添加单词Alphabet，它不应具有删除线格式。 h4 标签里的 “Google” 外添加 s 标签，然后在 s 标签外面添加单词 Alphabet，Alphabet 不要有删除线格式。
+s标签来标记。
- testString: 'assert($("s").length == 1, "Your code should add one s tag to the markup.");'
- - text: s标记应该环绕h4标记中的Google文本。它不应包含单词Alphabet。
- testString: 'assert($("s").text().match(/Google/gi) && !$("s").text().match(/Alphabet/gi), "A s tag should wrap around the Google text in the h4 tag. It should not contain the word Alphabet.");'
- - text: 在h4标记中包含单词Alphabet，不带删除线格式。
- testString: 'assert($("h4").html().match(/Alphabet/gi), "Include the word Alphabet in the h4 tag, without strikethrough formatting.");'
+ - text: '你应该添加一个 s 标签。'
+ testString: assert($('s').length == 1, '你应该添加一个s标签。');
+ - text: ' s 标签应该在 h4 标签内的 Google 文字外面，它不应该包含单词 Alphabet。'
+ testString: assert($('s').text().match(/Google/gi) && !$('s').text().match(/Alphabet/gi), 's 标签应该在 h4 标签内的 Google 文字外面，它不应该包含单词 Alphabet。');
+ - text: 'h4 标签内应该有单词 Alphabet，Alphabet 应该没有删除线样式。'
+ testString: assert($('h4').html().match(/Alphabet/gi), 'h4 标签内应该有单词 Alphabet，Alphabet 应该没有删除线样式。');
```
@@ -64,15 +70,14 @@ tests:
-
```
@@ -84,7 +89,9 @@ tests:
## Solution
Google
- strong标记。这通常用于引起对文本的注意，并象征着它很重要。使用strong标记，浏览器应用CSS的font-weight: bold;对元素。 strong 标签来加粗文字。添加了 strong 标签后，浏览器会自动给元素应用 font-weight:bold;。
+p标签内围绕“斯坦福大学”包裹一个strong的标签。 p 标签里的 “斯坦福大学” 外面添加 strong 标签。
+strong标记。
- testString: 'assert($("strong").length == 1, "Your code should add one strong tag to the markup.");'
- - text: strong标记应该在p标记内。
- testString: 'assert($("p").children("strong").length == 1, "The strong tag should be inside the p tag.");'
- - text: strong标签应该包含“斯坦福大学”这个词。
- testString: 'assert($("strong").text().match(/^Stanford University$/gi), "The strong tag should wrap around the words "Stanford University".");'
+ - text: '你应该有一个 strong 标签。'
+ testString: assert($('strong').length == 1, '你应该有一个 strong 标签。');
+ - text: 'strong 标签应该在 p 标签里。'
+ testString: assert($('p').children('strong').length == 1, 'strong 标签应该在 p 标签里。');
+ - text: 'strong 标签应该包围 “斯坦福大学”。'
+ testString: assert($('strong').text().match(/^斯坦福大学$/gi), 'strong 标签应该包围 “斯坦福大学”。');
```
@@ -64,15 +70,14 @@ tests:
-
```
@@ -87,4 +92,6 @@ tests:
```js
// solution required
```
+
Google
- text-transform属性用于更改文本的外观。这是一种方便的方法，可确保网页上的文字始终如一，而无需更改实际HTML元素的文本内容。下表显示了不同的text-transform值如何更改示例文本“转换我”。 值 结果 lowercase “改变我” uppercase “改变我” capitalize “改变我” initial 使用默认值 inherit 使用父元素的 text-transform值 none 默认值：使用原始文本 text-transform 属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示，且无需直接改变 HTML 元素中的文本。
+下面的表格展示了text-transform 的不同值对文字 “Transform me” 的影响。
+
+Value Result lowercase"transform me" uppercase"TRANSFORM ME" capitalize"Transform Me" initial使用默认值 inherit使用父元素的 text-transform 值。noneDefault:不改变文字。 text-transform属性将h4的text-transform为大写。 text-transform 属性把 h4 内的英文的所有字母变成大写。
+h4文本应为大写。
- testString: 'assert($("h4").css("text-transform") === "uppercase", "The h4 text should be uppercase.");'
- - text: 不应更改h4的原始文本。
- testString: 'assert(($("h4").text() !== $("h4").text().toUpperCase()), "The original text of the h4 should not be changed.");'
+ - text: 'h4 内的英文的所有字母应该为大写。'
+ testString: assert($('h4').css('text-transform') === 'uppercase', 'h4 内的英文的所有字母应该为大写。');
+ - text: 'h4 内的原文不能被改变。'
+ testString: assert(($('h4').text() !== $('h4').text().toUpperCase()), 'h4 内的原文不能被改变。');
```
@@ -38,7 +45,7 @@ tests:
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
-
+
}
p {
text-align: justify;
@@ -70,15 +77,14 @@ tests:
-
```
@@ -90,7 +96,9 @@ tests:
## Solution
Alphabet
- u标记。这通常用于表示一段文字很重要，或者需要记住的东西。使用u标签，浏览器应用text-decoration: underline;的CSS text-decoration: underline;对元素。 u 标签来给文字添加下划线。添加了 u 标签后，浏览器会自动给元素应用 text-decoration: underline;。
+u标签。 注意
当它可能与链接混淆时尽量避免使用u标签。 Anchor标签也有默认的带下划线的格式。 u 标签，不要给整个 class 为 cardText 的父 div 添加。
+注意：锚点默认给文本添加下划线，如果 u 标签的下划线和页面的锚点混淆，请避免使用它。
+u标记。
- testString: 'assert($("u").length === 1, "Your code should add a u tag to the markup.");'
- - text: u标签应该包含文本“Ph.D. students”。
- testString: 'assert($("u").text() === "Ph.D. students", "The u tag should wrap around the text "Ph.D. students".");'
+ - text: '你应该有一个 u 标签。'
+ testString: assert($('u').length === 1, '你应该有一个 u 标签。');
+ - text: 'u 标签应该包围 “理工博士”。'
+ testString: assert($('u').text() === '理工博士', 'u 标签应该包围 “理工博士”。');
+ - text: 'u 标签内不应包含额外的 div 标签。'
+ testString: assert($('u').children('div').length === 0, 'u 标签内不应包含额外的 div 标签。');
```
@@ -62,15 +71,14 @@ tests:
-
```
@@ -82,7 +90,9 @@ tests:
## Solution
Google
-