[分享]css3动画鼠标放上去阴影

CSS3动画可谓前端开发的重头戏之一，其中一个值得一提的功能就是能够通过鼠标放上去制作阴影效果。下面我们将结合代码的方式详细介绍如何实现。/ 首先我们需要定义动画效果 / .shadowbox { :...

CSS3动画可谓前端开发的重头戏之一，其中一个值得一提的功能就是能够通过鼠标放上去制作阴影效果。下面我们将结合代码的方式详细介绍如何实现。

/* 首先我们需要定义动画效果 */
.shadow-box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #f5f5f5;
  box-shadow: 0 0 5px rgba(0,0,0,.2);
  transition: box-shadow 0.25s ease;
}
.shadow-box:hover {
  box-shadow: 0 0 10px rgba(0,0,0,.4);
}

/* 解释一下 */
/* 定义了 .shadow-box 类，其中包括了原始状态的背景颜色以及一个轻微的阴影 */
/* 动画效果通过:hover伪类来实现，当鼠标放在上面的时候，会出现二级较深的阴影效果 */ 

这个方法虽然简单，但却能很直接有效地提高网页的交互性。通过合理的运用，能够制作出非常有趣的交互效果。大家可以试着将这个动画效果应用到自己的网页中，看看效果如何。