怎样实现六边形按钮特效

来源：动视网责编：小采时间：2020-11-27 19:46:33

怎样实现六边形按钮特效

怎样实现六边形按钮特效:这次给大家带来怎样实现六边形按钮特效，实现六边形按钮特效的注意事项有哪些，下面就是实战案例，一起来看一下。代码解读定义dom，容器中只包含 1 个按钮：<nav> <ul> <li>Home</li> </ul> </nav

推荐度：

点击下载本文 文档为doc格式

导读怎样实现六边形按钮特效:这次给大家带来怎样实现六边形按钮特效，实现六边形按钮特效的注意事项有哪些，下面就是实战案例，一起来看一下。代码解读定义dom，容器中只包含 1 个按钮：<nav> <ul> <li>Home</li> </ul> </nav

这次给大家带来怎样实现六边形按钮特效，实现六边形按钮特效的注意事项有哪些，下面就是实战案例，一起来看一下。

代码解读

定义dom，容器中只包含 1 个按钮：

<nav>
 <ul>
 <li>Home</li>
 </ul>
</nav>

定义按钮样式：

nav {
 --h: 3em;
}
nav ul {
 padding: 0;
}
nav ul li {
 list-style-type: none;
 width: calc(var(--h) * 1.732);
 height: var(--h);
 background-color: #333;
 color: white;
 font-family: sans-serif;
 text-align: center;
 line-height: var(--h);
}

用伪元素增加2个倾斜的矩形：

nav ul li {
 position: relative;
}
nav ul li::before,
nav ul li::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: inherit;
 height: inherit;
 background-color: #333;
}
nav ul li::before{
 transform: rotate(60deg) translateX(calc(var(--h) * -2));
}
nav ul li::after{
 transform: rotate(-60deg) translateX(calc(var(--h) * 2));
}

增加鼠标划过效果：

nav ul li::before,
nav ul li::after {
 z-index: -1;
 filter: opacity(0);
 transition: 0.3s;
}
nav ul li:hover::before {
 filter: opacity(1);
 transform: rotate(60deg) translateX(0);
}
nav ul li:hover::after {
 filter: opacity(1);
 transform: rotate(-60deg) translateX(0);
}

dom 中增加几个按钮，形成一组按钮：

<nav>
 <ul>
 <li>Home</li>
 <li>Products</li>
 <li>Services</li>
 <li>Contact</li>
 </ul>
</nav>

按钮之间为鼠标划过效果留出边距：

nav ul li {
 margin: 2em;
}

再增加两组按钮：

<nav>
 <ul>
 <li>Home</li>
 <li>Products</li>
 <li>Services</li>
 <li>Contact</li>
 </ul>
</nav>
<nav>
 <ul>
 <li>Home</li>
 <li>Products</li>
 <li>Services</li>
 <li>Contact</li>
 </ul>
</nav>
<nav>
 <ul>
 <li>Home</li>
 <li>Product Vs</li>
 <li>Services</li>
 <li>Contact</li>
 </ul>
</nav>

最后，尝试一些变化：

nav {
 --h: 3em;
}
nav:nth-child(1) {
 --rate: 1.5;
 --bgcolor: black;
}
nav:nth-child(2) {
 --rate: 1.732;
 --bgcolor: brown;
}
nav:nth-child(3) {
 --rate: 2;
 --bgcolor: green;
}
nav ul li {
 width: calc(var(--h) * var(--rate));
 background-color: var(--bgcolor);
}
nav ul li::before,
nav ul li::after {
 background-color: var(--bgcolor);
}

大功告成！

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

怎样实现六边形按钮特效

推荐度：

点击下载本文 文档为doc格式

标签：如何特效效果

热门焦点

怎样实现六边形按钮特效

怎样实现六边形按钮特效

代码解读

怎样实现六边形按钮特效

最新推荐

猜你喜欢

热门推荐