CSS SNIPPET

  返回

悬停阴影动画  动画效果

为文本创建鼠标悬停时的阴影效果。

HTML
<p class="hover-shadow-box-animation">Box it!</p>
CSS
.hover-shadow-box-animation {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  margin: 10px;
  transition-duration: 0.3s;
  transition-property: box-shadow, transform;
}
.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
  transform: scale(1.2);
}
效果演示

Box it!

代码说明
  1. display: inline-block 设置p 元素的宽度和长度。
  2. 设置transform: perspective(1px) 为元素营造3D空间,通过改变 用户和Z平面的距离而实现。translate(0) 用来在3D空间中,沿着 Z轴重新定位p 元素。
  3. box-shadow: 设置阴影盒。
  4. transparent 将阴影盒声明为透明。
  5. transition-property 同时启用box-shadowtransform过渡。
  6. :hover 激活鼠标悬停的CSS效果。
  7. transform: scale(1.2) 改变缩放比例,用来放大文字。
浏览器支持

100.0%