CSS 动画 - 阴影盒子的动画效果

2019-08-12

描述

当鼠标移上时，在文本周围创建一个带阴影盒子的效果。

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);
}

Demo

说明

• display: inline-block 为 p 元素的长设置一个宽度，这样就可以使其成为一个 inline-block
• transform: perspective(1px) 通过影响用户和 Z 平面的距离为元素创建一个 3D 空间，translate(0) 在 3D 空间中可以延 z 轴重新定位 p 元素
• box-shadow: 设置一个盒子
• transparent 让盒子透明
• transition-property 当 box-shadow 和 transform 变化时能产生过渡效果
• :hover 从鼠标移动完成到 active 状态都将启用其内部的所有样式
• transform: scale(1.2) 用来修改比例，让文本放大

浏览器支持

支持率：97.3%
支持情况：

• https://caniuse.com/#feat=transforms3d
• https://caniuse.com/#feat=css-transitions

返回总目录

每天 30 秒系列之 CSS