[分享]css3撞击效果

CSS3撞击效果是一种可以让网页元素在受到鼠标点击或触摸时产生类似于物体受力撞击后弹起的特效。

.button {
  padding: 10px 20px;
  border: none;
  background-color: #1abc9c;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.button:hover, .button:active {
  transform: translateY(5px);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
} 

可以看到，我们通过在:hover和:active伪类中使用transform来移动按钮，使得按钮看起来像是被撞击了一下。同时，我们通过给按钮添加box-shadow来增加这个效果的真实感。

需要注意的是，这个特效对点击或触摸有一定的敏感度。如果用户的动作比较轻微，可能无法触发这个特效，所以在设计网页时需要考虑到用户体验。