前端实现按钮分层悬浮按钮的效果，工资涨起来

前言

今天看到一个分层的悬浮动画按钮效果，花了一下午的时间实现了效果并整理了实现的过程，分享给大家。

 思路分析

接下来我们一步一步的分析按钮的实现过程。

准备容器

一共有五层，所以要准备 5 个容器，为了后续方便的使用 calc 属性进行计算，我们给每层都添加一个 css 变量 --s ，序号从 1 到 5。

这里大家注意，我们是给最后一层的 span 标签添加了图标，为什么是最后一层我们一会说。

.main {
		    width: 200px;
		    height: 100px;
		    position: absolute;
		    left: 50%;
		    top: 50%;
		    transform: translate(-50%, -50%);
		    background-color: #1e90ff;
			border-radius: 10%;
		}

这里我们使用 left+top+translate(-50%, -50%) 实现 未知宽度的水平垂直居中 。

        2D转换

动图中的按钮是一个棱形的，像躺在地上的一种效果。

为了实现这个效果，我们要用到 rotate 和 skew 这两个属性，rotate 可以将元素按给定的角度旋转，而 skew 是按给定的角度进行倾斜。

此时的效果就差不离了，接下来我们把 span 都设置成 100% 的宽高，这样每层的形状就都是棱形了。

.main span {
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    font-size: 80px;
		    color: #1e90ff;
		    border-radius: 10%;
		    border: 1px solid #1e90ff;
			transition: 0.5s linear;
		}

这里用 flex 布局实现了居中的效果，目的是让图标居中。同时将图标的 font-size 调大以调整图标的大小。

Hover 态效果

接下来就是重中之重了，我们要实现一个悬浮的效果。

悬浮的效果我们用的仍然是 2D 变换中的属性：translate ，它可以根据给定的值进行横向或是纵向的偏移。我们可以想象一下，如果一个元素进行小的横向和纵向的偏移，是不是从视觉上来看就是一个悬浮的效果了？

这里每层的横向偏移都要向左递减，纵向偏移都要向上递增。有的小伙伴可能疑惑为啥要向左递减，这是由于我们刚刚使用了 rotate 改变了方向，此时如果给的偏移量是正数，则会往另一边跑。

.main:hover span {
		    transform: translate(calc(var(--s) * 10%), calc(-1 * var(--s) * 10%));
		    opacity: calc(0.2 * var(--s));
		    background-color: #1e90ff;
		    color: #fff;
		    text-shadow: 0 0 10px #fff;
		}

为了让每层有个过渡的效果，我们可以使用 opacity 属性给每层设置不同的透明度。同时，还可以给其一个过渡效果，让动画更自然。

.main span {
    ...
    transition: 0.5s linear;
}

至此，我们就实现了这个效果啦~

完整代码

结束语

如果小伙伴们有别的想法，欢迎留言，让我们共同学习进步。

如果文中有不对的地方，或是大家有不同的见解，欢迎指出。

如果大家觉得所有收获，欢迎一键三连。