[分享]css3按钮泡泡动画

CSS3按钮泡泡动画是一种非常炫酷的界面效果，可以在网站中使用，为用户带来更好的浏览体验。下面我们将为大家介绍如何实现这种泡泡动画。/ 创建两个元素，一个是泡泡扩散效果，一个是按钮本身 / .bubb...

CSS3按钮泡泡动画是一种非常炫酷的界面效果，可以在网站中使用，为用户带来更好的浏览体验。下面我们将为大家介绍如何实现这种泡泡动画。

/* 创建两个元素，一个是泡泡扩散效果，一个是按钮本身 */
.bubbleButton {
  position: relative;
  display: inline-block;
  font-size: 16px;
  padding: 10px 20px;
  background-color: #00a2d1;
  border-radius: 30px;
  color: #fff;
  overflow: hidden;
  z-index: 1;
  transition: all .4s ease;
}

.bubbleButton:before {
  content: ';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .15);
  transform: translate(-50%, -50%);
  z-index: -1;
  transition: all .8s ease;
}

/* 鼠标悬停到按钮上时，泡泡扩散效果开始显示 */
.bubbleButton:hover {
  color: #00a2d1;
  background-color: #fff;
  border: 2px solid #00a2d1;
  box-shadow: 0 7px 14px rgba(0, 0, 0, .1);
}

.bubbleButton:hover:before {
  width: 500px;
  height: 500px;
  transition-duration: 1s;
} 

首先，在CSS中创建两个元素，一个是泡泡扩散效果，一个是按钮本身。为按钮设置一些基本样式，例如背景颜色、边界半径、颜色等。同时，将泡泡效果的z-index属性设置为-1，使得它能够被按钮所覆盖。

接着，在:hover时，将按钮的背景色改为白色，颜色改为原来的蓝色，并且添加一个2像素的边框，以及一个阴影效果。同时，将泡泡扩散效果的宽度和高度都设置为500像素，通过过渡的动画效果，让泡泡扩散效果逐渐显现出来。

通过以上CSS代码，我们便可以实现一个非常酷炫的CSS3按钮泡泡动画效果，为网站注入更多的生机和活力。