代码解读
定义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); }
大功告成!
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上就是怎样实现六边形按钮特效的详细内容,更多请关注php中文网其它相关文章!
![php中文网最新课程二维码](/static/images/article_wechat2021.jpg?1111)
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论