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

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

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

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

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

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

然后开始CSS,先让容器居中显示:

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

再给点3D效果:

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

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

这下好多了

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

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

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

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

大功告成,完美!

最终效果

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

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

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

2.CSS语法中的变量使用

3.CSS3伪类选择器的使用

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

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

你可能感兴趣的:(CSS3百行之内轻松完成金属光泽3D按钮特效)