[分享]css3按钮呼吸动画

CSS3 动画逐渐成为现代网页设计的重要部分。在设计按钮时，我们可以使用 CSS3 呼吸动画来增加按钮的可交互性。

.button{
  width: 100px;
  height: 40px;
  padding: 10px 20px;
  background: #0077ff;
  border: none;
  border-radius: 20px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  position: relative; /*相对定位*/
  overflow: hidden; /*溢出隐藏*/
}

.button:before{
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: rgba(255, 255, 255, 0.5); /*半透明白色*/
  border-radius: 50%; /*圆形*/
  transform: scale(0);
  opacity: 0;
  transition: transform 0.6s, opacity 1s;
}

.button:hover:before{
  transform: scale(3);
  opacity: 1;
}

通过以上代码，我们可以定义一个名为 .button 的 CSS 类，设置按钮的样式，包括背景、圆角、字体等等。

接着，在按钮中插入 ::before 伪元素，设置它的 position:absolute 为相对定位，使其显示在按钮上方。然后，将宽度和高度设置为 200%，并将 top 和 left 位置设置为 -50%，使伪元素的中心点与按钮的中心点重合。

接着，给伪元素设置背景颜色和圆角，然后使用 transform: scale(0); 将伪元素缩小到原始大小的 scale(0)。

当鼠标悬停在按钮上时，使用 :hover 伪类选择器，将伪元素的 transform 和 opacity 属性设置为 scale(3) 和 1，分别使伪元素放大三倍，完全不透明。

这样，我们就实现了一个简单的呼吸动画效果，使按钮更加生动有趣。