css动画案例及代码

CSS动画已经成为网页设计中不可或缺的一部分，通过CSS的简单设置，即可在网页上实现各种动态效果，提高用户体验。下面介绍一个基于CSS动画的案例。

/*HTML代码*/
<div class="Box">
  <p>点击我！</p>
</div>

/*CSS代码*/
.Box{
  width: 200px;
  height: 200px;
  background-color: #FFBE00;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.Box p{
  color: #FFFFFF;
  font-size: 24px;
  font-weight: bold;
  transition: all 0.3s;
}

.Box:hover p{
  transform: scale(1.2);
}

这是一个简单的圆形div，在hover状态下，p标签会放大，从而实现了一种简单的交互效果。