这次给大家带来怎样实现六边形按钮特效,实现六边形按钮特效的注意事项有哪些,下面就是实战案例,一起来看一下。
定义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 { --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); }
大功告成!
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是怎样实现六边形按钮特效的详细内容。更多信息请关注PHP中文网其他相关文章!