[分享]css3按下div动画效果

在网页设计中，我们经常需要添加一些交互性效果来吸引用户，其中按下div动画效果是一种非常实用的效果。使用CSS3可以实现不同的按下动画效果，让网站更加生动、绚丽。下面就为大家介绍两种常见的CSS3按下...

在网页设计中，我们经常需要添加一些交互性效果来吸引用户，其中按下div动画效果是一种非常实用的效果。使用CSS3可以实现不同的按下动画效果，让网站更加生动、绚丽。

下面就为大家介绍两种常见的CSS3按下div动画效果。

<!-- 实现按下时深度凹陷 -->
<div class="box1"></div>

.box1 {
  background-color: #eee;
  width: 200px;
  height: 200px;
  transition-property: transform, box-shadow;
  transition-duration: 0.2s;
}

.box1:active {
  transform: scale(0.95);
  box-shadow: 0px 0px 20px #ddd inset;
} 

以上代码实现了当用户按下div时，div会产生深度凹陷的效果。

<!-- 实现按下时文字出现 -->
<div class="box2">
  <h2>点击查看详情</h2>
</div>

.box2 {
  background-color: #eee;
  width: 200px;
  height: 100px;
  transition-property: transform, color, background-color;
  transition-duration: 0.2s;
}

.box2 h2 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.2s;
}

.box2:active {
  transform: scale(0.95);
  background-color: #ddd;
  color: #fff;
}

.box2:active h2 {
  opacity: 1;
} 

以上代码实现了当用户按下div时，div背景颜色和文字颜色进行变化，并且显示隐藏的文字。

通过CSS3的灵活运用，我们可以实现更加复杂的动画效果，让网站变得更加生动、吸引人。