css上机考试试题

最近我们在上计算机课程的时候，老师布置了一道CSS上机考试试题，让我们熟悉一下CSS的应用。下面是这个试题的相关内容：

.container {
  height: 500px;
  width: 600px;
  background-color: #F5F5F5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  height: 200px;
  width: 200px;
  background-color: #4CAF50;
  border-radius: 50%;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
} 

这道考试题主要要求我们根据上面给出的CSS代码，实现一个具有旋转动画效果的绿色圆形居中在灰色方框中的页面。

我们可以通过使用flex布局来实现灰色方框的居中效果。具体地，我们可以给容器元素.container设置高度、宽度和背景颜色，并且使用display:flex、justify-content:center和align-items:center来实现居中显示。同样地，我们可以给绿色圆形.box设置高度、宽度、背景颜色和圆角半径，然后通过设置旋转动画关键帧@keyframes rotate来实现旋转效果。

通过以上CSS代码的应用，我们可以成功实现一个具有旋转动画效果的绿色圆形居中在灰色方框中的页面。这道试题不仅考察了我们对CSS的基础知识的掌握，也让我们更加熟悉CSS的应用，并且使我们的网页设计能力得到了进一步提升。