likes
comments
collection
share

使用 CSS 编写一个丰富多彩的九宫格菜单

作者站长头像
站长
· 阅读数 48

前言

大家好，我是爱吃鱼的桶哥Z，在前面一篇文章中，我们通过 CSS 中的 box-shadow 和 animation 属性，实现了一个炫酷的旋转小球，今天我们就继续来使用 CSS 编写一个丰富多彩的九宫格菜单。首先我们还是先来看一下最终实现的效果，如下图所示：

使用 CSS 编写一个丰富多彩的九宫格菜单

通过上图可以看到，默认状态下像一个筛子一样有九个点，当被点击后，会进行展开，并且展示里面的九个 icon，通过这九个 icon 就可以实现九个不同的菜单选项。下面我们就一起来看一下这个效果是如何实现的。

九宫格

我们先在页面中画出这个九宫格，还是先来看一下相关的 html 内容，代码如下：

<div class="navigation">
    <span style="--i:0;--x:0;--y:0;"></span>
    <span style="--i:1;--x:0;--y:0;"></span>
    <span style="--i:2;--x:0;--y:0;"></span>
    <span style="--i:3;--x:0;--y:0;"></span>
    <span style="--i:4;--x:0;--y:0;"></span>
    <span style="--i:5;--x:0;--y:0;"></span>
    <span style="--i:6;--x:0;--y:0;"></span>
    <span style="--i:7;--x:0;--y:0;"></span>
    <span style="--i:8;--x:0;--y:0;"></span>
</div>

在上面的 html 中，我们可以看到给每个 span 标签的 style 上都添加了一个 --i，它的值就是这9个 span 标签的顺序值，而后面的 --x 和 --y 就是用来定位的，这里先都默认设置为0，等写到后面要设置的时候我们再来修改这里。

接下来我们需要添加相关的初始 css 了，让我们一起来看一下相关的初始样式，代码如下：

*{margin: 0; padding: 0;}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;;
    background: #10131c;
}
.navigation {
    position: relative;
    width: 70px;
    height: 70px;
    background: #212532;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    transition-delay: .8s;
}
.navigation span{
    position: absolute;
    width: 7px;
    height: 7px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(calc(12px * var(--x)), calc(12px * var(--y)));
    transition:  transform 0.5s, width 0.5s, height 0.5s, background 0.5s;
    transition-delay: calc(0.1s * var(--i));
}

在上述的 css 样式中，我们给每个 span 标签都添加了一个 transform 属性，这个属性的值来源于每个 span 标签上面的 --x 和 --y，由于我们在前面的 html 中设置的默认值都是0，因此最终展示在页面中的样式如下所示：

使用 CSS 编写一个丰富多彩的九宫格菜单

可以看到由于我们并没有设置 --x 和 --y 的值，因此所有的点都集中叠加在了正中心，接下来我们需要修改上面的 html，让这九个点按照九宫格的样子排列开来，让我们一起来看修改后的 html，代码如下：

<span style="--i:0;--x:-1;--y:0;"></span>
<span style="--i:1;--x:1;--y:0;"></span>
<span style="--i:2;--x:0;--y:-1;"></span>
<span style="--i:3;--x:0;--y:1;"></span>
<span style="--i:4;--x:1;--y:1;"></span>
<span style="--i:5;--x:-1;--y:-1;"></span>
<span style="--i:6;--x:0;--y:0;"></span>
<span style="--i:7;--x:-1;--y:1;"></span>
<span style="--i:8;--x:1;--y:-1;"></span>

由于我们在前面的 css 中设置每个 span 的 transform 属性值是由 12px * var(--x) 来得出的，因此当我们修改 --x 和 --y 的值时，当前的小圆点就会根据这个公式来找到它自己的坐标点，最终实现的效果如下所示：

使用 CSS 编写一个丰富多彩的九宫格菜单

现在大家应该能够明白在标签上添加 --x 这样的值的用处了吧？

现在已经实现了菜单收起时的样子，接下来我们就需要添加菜单展开时的样式了，该如何做呢？

展开的九宫格

我们要点击让这个菜单展开，那么就需要通过点击的时候添加一个展开的样式，既然要点击，就一定需要用到 js 了，这里我们只需要很简单的几行 js 代码即可，让我们一起来看一下 js 代码，如下：

const navigation = document.querySelector('.navigation');
navigation.addEventListener('click', () => {
    navigation.classList.toggle('active');
});

可以看到我们只是选择了这个菜单元素，并且给它添加了一个点击事件，在点击事件中通过 toggle 来不断的切换这个菜单的 class，最终实现菜单的展开和收起。

接下来我们就需要一起来看一下添加了 active 后的样式，代码如下：

.navigation.active {
    width: 200px;
    height: 200px;
    transition-delay: 0;
}
.navigation.active span{
    width: 45px;
    height: 45px;
    background: #333849;
    transform: translate(calc(60px * var(--x)), calc(60px * var(--y)));
}

当给菜单添加了 active 样式后，菜单就能够通过点击展开和收起了，我们一起来看一下实现的效果，如下所示：

使用 CSS 编写一个丰富多彩的九宫格菜单

可以看到目前已经实现了点击菜单收起和展开的效果了，接下来我们就需要在这九个圆中添加相关的 icon 了，这次我们使用 ionicons 来添加相关的 icon，具体的内容可以点击 ionicons 的官网进行查看，我们需要引入相关的 js 文件 unpkg.com/ionicons@la… ，然后继续修改之前的 html，代码如下：

<div class="navigation">
    <span style="--i:0;--x:-1;--y:0;"><ion-icon name="camera-outline"></ion-icon></span>
    <span style="--i:1;--x:1;--y:0;"><ion-icon name="diamond-outline"></ion-icon></span>
    <span style="--i:2;--x:0;--y:-1;"><ion-icon name="chatbubble-ellipses-outline"></ion-icon></span>
    <span style="--i:3;--x:0;--y:1;"><ion-icon name="alarm-outline"></ion-icon></span>
    <span style="--i:4;--x:1;--y:1;"><ion-icon name="help-circle-outline"></ion-icon></span>
    <span style="--i:5;--x:-1;--y:-1;"><ion-icon name="location-outline"></ion-icon></span>
    <span style="--i:6;--x:0;--y:0;"><ion-icon name="notifications-circle-outline"></ion-icon></span>
    <span style="--i:7;--x:-1;--y:1;"><ion-icon name="game-controller-outline"></ion-icon></span>
    <span style="--i:8;--x:1;--y:-1;"><ion-icon name="moon-outline"></ion-icon></span>
</div>

在修改后的 html 中，我们添加了相关的 ion-icon 标签，通过这些标签就能够渲染出相关的 icon 了。当然，光有这些 icon 还不够，我们需要继续来修改之前的 css ，让这些 icon 以我们需要的方式展示出来，相关的 css 代码如下：

.navigation span ion-icon {
    transition: 0.5s;
    font-size: 0em;
}
.navigation.active span ion-icon {
    font-size: 1.35em;
    color: #fff;
}
.navigation.active span:hover ion-icon {
    color: #2dfc52;
    filter: drop-shadow(0 0 2px #2dfc52) drop-shadow(0 0 5px #2dfc52) drop-shadow(0 0 15px #2dfc52);
}

我们给每个 icon 标签设置的字体大小为 1.35em，并且背景色是白色的。当鼠标移入到 icon 中时，还添加了一个滤镜效果，最终的代码及完整的展示效果如下所示：

总结

在这一节中，用到的 css 其实并不复杂，但是我们学到了在标签的 style 中添加 --x 和 --y 这样的属性值，并通过 var() 在 css 中来获取这个值，关于 var() 的使用，大家可以点击这里进行查看。

最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家

往期回顾

『 纯 CSS 实现』使用 CSS 开发一个炫酷旋转小球

哇哦，icon 还能这么玩？

『 实战』从0到1，带你开发开发一款令人惊叹的时钟特效

CSS 复刻 iPhone14，并接到了优弧的电话😏，还不快接电话？

今年中秋的月亮真漂亮~

『 纯 CSS 实现』哇塞，彩虹🌈还能这么玩？

『 禁止吸烟🚭』纯 CSS 实现 | 禁烟也能做的这么酷炫

送你一个可爱的大圆脸😁，速来~

这么炫酷的 3D Menu 效果，真的不来看看？

产品经理：你这个效果不行，我想要一个五彩斑斓的黑！我：。。。

转载自:https://juejin.cn/post/7159342522781663263
评论
请登录