悬停阴影框动画
当鼠标悬停在文本上方时,创建一个阴影框。
- 设置
transform: perspective(1px)
以通过影响 Z 平面与用户之间的距离给元素提供一个三维空间,并使用translate(0)
在三维空间中重新定位p
元素沿着 Z 轴。 - 使用
box-shadow
使框变为透明。 - 使用
transition-property
启用box-shadow
和transform
的过渡效果。 - 使用
:hover
、:active
和:focus
伪类选择器应用新的box-shadow
和transform: scale(1.2)
来改变文本的缩放比例。
<p class="hover-shadow-box-animation">Box it!</p>
.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);
}