[分享]css3按钮动画ku

CSS3按钮动画库可以帮助开发者在网页中添加漂亮的按钮效果，提升用户体验。下面介绍几种常见的CSS3按钮动画效果。.button { display: inlineblock; padding: 10...

CSS3按钮动画库可以帮助开发者在网页中添加漂亮的按钮效果，提升用户体验。下面介绍几种常见的CSS3按钮动画效果。

.button {
  display: inline-block;
  padding: 10px 15px;
  color: #fff;
  background: #2ecc71;
  border: none;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.3s;
}

/* 1. 悬停效果 */
.button:hover {
  background: #27ae60;
}

/* 2. 点击效果 */
.button:active {
  position: relative;
  top: 1px;
}

/* 3. 闪烁效果 */
@keyframes blink {
  50% {
    opacity: 0.5;
  }
}

.button-blink {
  animation: blink 1s infinite;
}

/* 4. 波纹效果 */
@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(10);
    opacity: 0.375;
  }
  100% {
    transform: scale(20);
    opacity: 0;
  }
}

.button-ripple {
  position: relative;
  overflow: hidden;
}

.button-ripple:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: #2ecc71;
  opacity: 1;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  animation: ripple 1s linear;
}

/* 5. 翻转效果 */
@keyframes flip {
  from { 
    transform: perspective(400px) rotateX(0deg);
  }
  to {
    transform: perspective(400px) rotateX(180deg);
  }
}

.button-flip {
  transform-style: preserve-3d;
}

.button-flip span {
  display: block;
  backface-visibility: hidden;
}

.button-flip:hover {
  animation: flip 0.5s;
}

.button-flip:hover span:first-child {
  transform: rotateX(-180deg);
}

.button-flip:hover span:last-child {
  transform: rotateX(0deg);
} 

以上几种按钮动画效果可以根据实际需求进行调整和组合，让网站更具有吸引力。