CSS3百行之内轻松完成金属光泽3D按钮特效

今天李老师来给大家讲解一个3D金属光泽的按钮特效，金属按钮效果其实不难，在3D效果上表现也不错。

其实这个效果代码量并不多，而且不需要用到JS就能完成了，百行之内就可以完成了，对于入手学习CSS动画可以说是比较简单的了。

下面给大家详细拆分代码讲解一下

首先在DOM中定义一个容器：

这个部分是按钮显示的文本内容

然后开始CSS，先让容器居中显示：

先做个2D效果出来，为了便于调整按钮尺寸，使用了变量：

再给点3D效果：

定义按钮的鼠标悬停动画的效果，左右摆一下：

感觉有点生硬，没什么动感，加个动画过渡时间吧

这下好多了

有了点动效，再加点光泽吧，3D感更好点。

但是，加上去光泽后，感觉不太对呀，光泽是固定的，盖住了文字，效果不是很好，要在摆动的同时光泽也跟着摆动才行，有种自然摆动反光的效果才行。

那我们可以这样写，先定义光泽部分的内容位置放在左边，悬停的时候让它过渡到右边来，这样比较简单了。当然，和摆动一样，过渡效果一定要有时间差。

这个时候，我们的效果基本就出来了，但是这个光泽部分因为外露在容器外面的，这个效果看着不太好，所以最后我们只要把容器外的隐藏起来就好了，在.box加个溢出隐藏。

大功告成，完美！

最终效果

这个效果大家学会了吗？其实开发起来非常简单，总代码不到一百行，最终代码如下：

好了，今天的内容就那么多，在这个教程里面最需要注意的是：

1.CSS3中2D/3D转换要把握好，理解transform的使用。

2.CSS语法中的变量使用

3.CSS3伪类选择器的使用

如果你也喜欢我的教程，点一下赞，转发和关注一下吧，以后还会继续出更多干货教程。

李老师的前端开发工程师班，在线学习课程马上就要开班咯，你如果是零基础学习，想成为前端开发工程师，也喜欢前端开发，还在犹豫什么，快趁现在优惠活动加入前端开发课程学习吧！