css制作点击

CSS 制作点击效果

使用 CSS 伪类 :active 可以创建点击效果，当元素被点击时会触发样式变化。

.button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.button:active {
  background-color: #3e8e41;
  transform: translateY(1px);
}

添加过渡效果

通过 transition 属性可以让点击效果更平滑。

.button {
  transition: background-color 0.3s, transform 0.1s;
}

使用 CSS 动画

利用 @keyframes 可以创建更复杂的点击动画。

@keyframes clickEffect {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.button:active {
  animation: clickEffect 0.3s;
}

自定义点击波纹效果

通过伪元素和动画实现类似 Material Design 的波纹效果。

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

.button:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 10%, transparent 10%) no-repeat 50%;
  transform: scale(10,10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.button:active:after {
  transform: scale(0,0);
  opacity: 0.3;
  transition: 0s;
}

禁用文本选择

防止快速点击时选中按钮文本。

.button {
  user-select: none;
  -webkit-user-select: none;
}