[分享]css3按钮动画效果代码

跟随着web开发技术的更新，越来越多的css3动画效果开始被广泛应用到现代网页设计中，其中就包括了实用的css3按钮动画效果。以下是一段简单的css3按钮动画效果代码： Hover Me .anim...

跟随着web开发技术的更新，越来越多的css3动画效果开始被广泛应用到现代网页设计中，其中就包括了实用的css3按钮动画效果。以下是一段简单的css3按钮动画效果代码：

<button class="animated-button1"><span></span><span></span><span></span><span></span>Hover Me!</button>
<br>
<style>
.animated-button1 span {
  display: block;
  position: absolute;
  background: #fff;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(-20px);
  transition: transform 0.5s, opacity 0.5s;
}
<br>
.animated-button1:hover span:nth-child(1) {
  transform: translateY(0px);
  opacity: 1;
  transition-delay: 0s;
}
<br>
.animated-button1:hover span:nth-child(2) {
  transform: translateY(0px);
  opacity: 1;
  transition-delay: 0.1s;
}
<br>
.animated-button1:hover span:nth-child(3) {
  transform: translateY(0px);
  opacity: 1;
  transition-delay: 0.2s;
}
<br>
.animated-button1:hover span:nth-child(4) {
  transform: translateY(0px);
  opacity: 1;
  transition-delay: 0.3s;
}
</style> 

这段代码创建了一个简单的动画效果，当鼠标悬停在按钮上时，四个白色方块会从按钮底部跳出，并形成一行，从而创造出一种“滑动”效果。这个动画效果可以运用于各种按钮中，例如单击按钮，提交表单按钮等。
上述代码块使用了CSS position属性，用于控制四个矩形块元素位置的相对值，以使其在悬停时从按钮底部滑动出。该元素复用了CSS3动画transition属性，以便在悬停时为其添加1秒的动画效果。pre标签支持CSS代码的渲染视图，以便更直观地理解代码所实现的内容。
在实际使用过程中，开发者可以根据项目需求对这段代码进行更改和调整，以获得更丰富的动画效果。虽然该代码段包含了一些基本的CSS技术，但它的动画效果足以在网页设计中产生鲜明的视觉效果。