[分享]css两种状态下的动画效果

CSS是一种前端样式语言，用于给网页添加样式和布局。在CSS中，有很多动画效果可以让网页更具有吸引力和动感。下面，我们将介绍CSS两种状态下的动画效果。/当鼠标悬停在元素上时，背景色渐变/ div{ ...

CSS是一种前端样式语言，用于给网页添加样式和布局。在CSS中，有很多动画效果可以让网页更具有吸引力和动感。下面，我们将介绍CSS两种状态下的动画效果。

/*当鼠标悬停在元素上时，背景色渐变*/
div{
  background-color: red;
  transition: background-color 0.5s ease;
}
div:hover{
  background-color: blue;
} 

上面的代码演示了当鼠标悬停在div元素上时，背景色渐变的动画效果。transition属性定义了变化的属性，时间和过渡效果。在这种情况下，当背景色从红色变成蓝色时，动画时间为0.5秒并使用渐变过渡效果。

/*当按钮被点击时，文本从上方滑入*/
button{
  position: relative;
}
button:active:before{
  content: "";
  position: absolute;
  top: -100%;
  width: 100%;
  height: 100%;
  background-color: blue;
  transition: top 0.5s ease;
}
button:active span{
  position: relative;
  z-index: 1;
} 

上面的代码演示了当按钮被点击时，文本从上方滑入的动画效果。button元素的position属性被设置为relative，使其子元素能够相对于按钮元素进行定位。当按钮被激活时，使用:before伪元素在按钮上方创建一个蓝色背景。使用transition属性，top属性在0.5秒内从-100%变为0，这使得:before元素滑入按钮的可视区域。最后，使用z-index属性确保span元素在:before元素之上，这样文本就不会被覆盖。

总之，在CSS中，创建动画效果是一种非常有趣和创意的工作。我们可以在不同的元素上应用不同的动画效果，以吸引用户的注意力并增强用户体验。