前言
这次带大家来实现一个由 HTML 和 CSS 组合而成的效果，一个立体铭牌。话不多说，我们直奔主题。
效果预览
整体效果如上所示。当鼠标悬停在按钮上时，按钮会产生一种立体旋转的效果，同时文本阴影、按钮阴影和背景渐变也都会发生变化，给人一种动态的视觉效果。
CSS 部分
HTML部分比较简单，我们直接进入CSS部分，首先我们看到box元素的样式处理，相关代码如下。
.box {
font-size: 33px;
width: 7.5em;
height: 2.5em;
background: linear-gradient(to right, gold, darkorange);
color: white;
text-align: center;
line-height: 2.5em;
font-family: sans-serif;
letter-spacing: 0.2em;
text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
border: 1px solid darkgoldenrod;
border-radius: 2em;
box-shadow: 2px 0 0 5px rgba(0, 0, 0, 0.2);
transform: perspective(500px) rotateY(-15deg);
transition: 0.5s;
position: relative;
overflow: hidden;
}
这段 CSS 代码定义了一个按钮的样式，包括其外观和动作特性。font-size: 33px;设置按钮内文本的字体大小为 33px。background: linear-gradient(to right, gold, darkorange);表示使用水平渐变背景色，从金黄色渐变到深橙色。line-height: 2.5em;则是设置行高等于按钮的高度，这样文本就垂直居中了。font-family: sans-serif;设置按钮内文本的字体为无衬线字体。letter-spacing: 0.2em;则是指定字符间的间距为 0.2em。text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);设置文本的阴影效果，形成一个向右下方的阴影。border: 1px solid darkgoldenrod;则是设置一个 1px 的边框，颜色为 darkgoldenrod。box-shadow: 2px 0 0 5px rgba(0, 0, 0, 0.2);表示创建一个阴影效果，得到按钮右侧的阴影。transform: perspective(500px) rotateY(-15deg);表示使用透视效果和沿 Y 轴的旋转，使按钮呈现出倾斜的视觉效果。transition: 0.5s;定义了按钮状态变换的过渡效果为 0.5 秒。position: relative;设置按钮的位置为相对定位，为后代元素绝对定位提供参考。overflow: hidden;表示如果内容溢出，隐藏溢出的部分。
然后是一些伪元素的应用，相关代码如下。
.box:hover {
transform: perspective(500px) rotateY(15deg);
text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2);
}
.box::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent, white, transparent);
left: -100%;
transition: 0.5s;
}
.box:hover::before {
left: 100%;
}
在 .box:hover 中，transform: perspective(500px) rotateY(15deg);表示悬停时应用透视效果和沿 Y 轴的旋转，使按钮产生旋转动画效果。text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);表示悬停时更新了文本的阴影效果，使其在按钮的左上方产生一个阴影效果。box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2);表示悬停时产生一个按钮左侧的阴影。
在 .box::before 中，content: "";表示伪元素的内容为空，通常用于添加修饰性的内容。position: absolute;表示绝对定位。left: -100%;表示将伪元素移动到按钮的左侧，使其不可见。transition: 0.5s;则是定义了按钮悬停时伪元素状态变换的过渡效果为 0.5 秒。
在 .box:hover::before 中，left: 100%;表示悬停时将伪元素移动到按钮的右侧，使其可见，从而产生了一个背景颜色渐变的效果。
以上这些规则组合在一起产生了一个按钮在悬停时的动态效果，包括旋转、阴影的移动，以及背景渐变的过渡效果。
总结
以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
