CSS 选择器

练习 1 练习 2 练习 3 练习 4 前往 CSS 选择器教程

CSS 如何...

练习 1 练习 2 练习 3 练习 4 前往 CSS 如何...教程

CSS 背景

练习 1 练习 2 练习 3 练习 4 练习 5 前往 CSS 背景教程

CSS 边框

练习 1 练习 2 练习 3 练习 4 前往 CSS 边框教程

CSS 外边距

练习 1 练习 2 练习 3 练习 4 前往 CSS 外边距教程

CSS 内边距

练习 1 练习 2 练习 3 前往 CSS 内边距教程

CSS 高度/宽度

练习 1 练习 2 前往 CSS 高度/宽度教程

CSS 盒模型

练习 1 练习 2 练习 3 练习 4 前往 CSS 盒模型教程

CSS 外轮廓

练习 1 练习 2 练习 3 前往 CSS 外轮廓教程

CSS 文本

练习 1 练习 2 练习 3 练习 4 练习 5 前往 CSS 文本教程

CSS 字体

练习 1 练习 2 练习 3 练习 4 练习 5 前往 CSS 字体教程

CSS 链接

练习 1 练习 2 练习 3 练习 4 前往 CSS 链接教程

CSS 列表

练习 1 练习 2 练习 3 练习 4 前往 CSS 列表教程

CSS 表格

练习 1 练习 2 练习 3 练习 4 练习 5 练习 6 前往 CSS 表格教程

CSS 显示/可见性

练习 1 练习 2 练习 3 练习 4 前往 CSS 显示/可见性教程

CSS 定位

练习 1 练习 2 练习 3 练习 4 前往 CSS 定位教程

CSS Z-index

练习 1 前往 CSS Z-index 教程

CSS 溢出

练习 1 练习 2 练习 3 前往 CSS 溢出教程

CSS 对齐

练习 1 练习 2 前往 CSS 对齐教程

CSS 组合器

练习 1 练习 2 练习 3 练习 4 前往 CSS 组合器教程

CSS 伪类

练习 1 练习 2 练习 3 练习 4 前往 CSS 伪类教程

CSS 伪元素

练习 1 练习 2 练习 3 前往 CSS 伪元素教程

CSS 透明度

练习 1 练习 2 前往 CSS 透明度教程

CSS 属性选择器

练习 1 练习 2 练习 3 练习 4 练习 5 练习 6 前往 CSS 属性选择器教程

CSS 圆角

练习 1 练习 2 前往 CSS 圆角教程

CSS 边框图像

练习 1 练习 2 前往 CSS 边框图像教程

CSS 背景

练习 1 练习 2 练习 3 练习 4 练习 5 前往 CSS 背景教程

CSS 颜色

练习 1 练习 2 练习 3 练习 4 前往 CSS 颜色教程

CSS 渐变

练习 1 练习 2 练习 3 练习 4 练习 5 练习 6 练习 7 前往 CSS 渐变教程

CSS 阴影效果

练习 1 练习 2 练习 3 练习 4 练习 5 前往 CSS 阴影效果教程

CSS 文本效果

练习 1 练习 2 练习 3 前往 CSS 文本效果教程

CSS 网络字体

练习 1 练习 2 前往 CSS 网络字体教程

CSS 2D 变换

练习 1 练习 2 练习 3 练习 4 前往 CSS 2D 变换教程

CSS 3D 变换

练习 1 练习 2 练习 3 前往 CSS 3D 变换教程

CSS 过渡

练习 1 练习 2 练习 3 练习 4 练习 5 前往 CSS 过渡教程

CSS 动画

练习 1 练习 2 练习 3 练习 4 练习 5 练习 6 前往 CSS 动画教程

×

×

正确

练习：

将以下5个步骤添加到动画“example”中（使用0%，25%，50%，75%和100%）：

0% - 将左侧位置设置为"0px"，将顶部位置设置为："0px"
25% - 将左侧位置设置为"0px"，将顶部位置设置为："200px"
50% - 将左侧位置设置为"200px"，将顶部位置设置为："200px"
75% - 将左侧位置设置为"200px"，将顶部位置设置为："0px"
100% - 将左侧位置设置为"0px"，将顶部位置设置为："0px"

<style> div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {left:0px; top:0px;} 25% {left:0px; top:200px;} 50% {left:200px; top:200px;} 75% {left:200px; top:0px;} 100% {left:0px; top:0px;} } </style> <body> <div>This is a div</div> </body>

<style> div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {left:0px;top:0px;} 25% {left:0px;top:200px;} 50% {left:200px;top:200px;} 75% {left:200px;top:0px;} 100% {left:0px;top:0px;} } </style> <body> <div>This is a div</div> </body>

<style> div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {top:0px;left:0px;} 25% {top:200px;left:0px;} 50% {top:200px;left:200px;} 75% {top:0px;left:200px;} 100% {top:0px;left:0px;} } </style> <body> <div>This is a div</div> </body>

<style> div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {top:0px; left:0px;} 25% {top:200px; left:0px;} 50% {top:200px; left:200px;} 75% {top:0px; left:200px;} 100% {top:0px; left:0px;} } </style> <body> <div>This is a div</div> </body>

不正确

点击此处重试

正确

下一题 ❯

<style>
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {w3exercise_input_no_0
;}
  25%  {w3exercise_input_no_1
;}
  50%  {w3exercise_input_no_2
;}
  75%  {w3exercise_input_no_3
;}
  100% {w3exercise_input_no_4
;}
}
</style>

<body>
  <div>This is a div</div>
</body>