php如何连接六边形对角线,怎样实现六边形按钮特效

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

代码解读

定义dom,容器中只包含 1 个按钮:

  • Home

定义按钮样式: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 中增加几个按钮,形成一组按钮:

  • Home
  • Products
  • Services
  • Contact

按钮之间为鼠标划过效果留出边距:nav ul li {

margin: 2em;

}

再增加两组按钮:

  • Home
  • Products
  • Services
  • Contact
  • Home
  • Products
  • Services
  • Contact
  • Home
  • Product Vs
  • Services
  • Contact

最后,尝试一些变化: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中文网其它相关文章!

推荐阅读:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用CSS3的transform属性和border-radius属性来实现带圆角的六边形按钮。 首先,可以设置按钮的宽高和圆角,然后使用transform: rotate(30deg),将按钮旋转30度,这样就可以得到六边形的形状。 接着,可以使用伪元素before和after分别创建左上和右上的三角形,并设置宽高、背景颜色和旋转角度,使其与六边形组合成为带圆角的六边形按钮。 以下是示例代码: ``` <style> .hexagon { width: 80px; height: 46px; background-color: #007bff; border-radius: 10px; position: relative; overflow: hidden; cursor: pointer; transform: rotate(30deg); } .hexagon:before, .hexagon:after { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-color: #007bff; transform: skewY(60deg); } .hexagon:before { left: -25%; border-top-right-radius: 15px; } .hexagon:after { left: 25%; border-top-left-radius: 15px; } </style> <div class="hexagon"></div> ``` 在上述代码中,使用了类名为hexagon的div元素作为六边形按钮容器,并设置了宽高、背景颜色、圆角、位置和旋转角度。然后使用伪元素before和after创建左上和右上的三角形,并设置宽高、背景颜色和旋转角度,同时使用border-radius属性设置其带圆角的形状。 最后,将六边形按钮容器的overflow属性设置为hidden,使得伪元素超出容器部分不可见,并设置cursor属性为pointer,使鼠标悬停时显示手型光标。 运行上述代码,就可以得到一个带圆角的CSS六角形按钮

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值