本文正在参加「金石计划 . 瓜分6万现金大奖」

前言

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

思路分析

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

准备容器

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

<div class="main">
    <span style="--s: 1"></span>
    <span style="--s: 2"></span>
    <span style="--s: 3"></span>
    <span style="--s: 4"></span>
    <span style="--s: 5"><i class="fa fa-heartbeat"></i></span>
</div>

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

.main {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: grey;
}

这里我们使用 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;
}

这里用 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;
}

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

结束语

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

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

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