想要的效果
设计的很好下次别设计了。。仅从技术角度探讨这种按钮是否能做
思路
- 设计提供了四个按钮hover状态时的背景svg图。
- 使用大圆减去小圆得到圆环的按钮形状，中间的按钮就绝对定位在中间，按钮与按钮之间的缝隙使用伪元素来遮挡，实际上按钮还是四分之一圆的形状。
- 伪元素使用到clip-path的css属性，使用了在线的Clip-Path编辑器，生成了基础的形状，最后在f12的开发者工具中手动调整polygon的各个参数，让箭头的形状和svg的边缘紧贴。
- 如果要加文字的话，目前的想法是内嵌在SVG里面，hover和正常状态时文字位置在同一处。
- 要么为每一个按钮创建一个canvas，然后在上下文ctx中创造一个圆弧arc()，让文字沿着弧线进行展示，最后给canvas添加鼠标穿透，应该就能实现，不过没试过，不知道可不可行。
- 我感觉我这种是委屈求全的方式，如果有更好的方式可以评论一下。
在线体验链接 https://crispychicken999.github.io/vite-threejs/button/2
附上代码：（vite+nuxt3）
<template>
<el-button @click="$router.push('/')">Return to homepage</el-button>
<div class="btn-demo-2" @click="handleClick">
<button class="one"></button>
<button class="two"></button>
<button class="three"></button>
<button class="four"></button>
<button class="center">
<el-icon><Setting /></el-icon>
</button>
</div>
</template>
<script setup>
useHead({
title: "Button Demo - 2",
meta: [
{
hid: "description",
name: "description",
content: "Button Demo",
},
],
});
function handleClick(e) {
ElMessage({
message: `Button Clicked: ${e.target.classList[0].toUpperCase()}`,
type: "success",
});
}
</script>
<style lang="scss" scoped>
.btn-demo-2 {
position: relative;
width: 500px;
height: 500px;
background: #021224;
border-radius: 50%;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
overflow: hidden;
&::after {
content: "";
position: absolute;
background-color: #021224;
top: 50%;
left: 50%;
width: 370px;
height: 370px;
border-radius: 50%;
transform: translate(-50%, -50%);
}
button {
width: 100%;
height: 100%;
background: #103653;
color: #fff;
border: none;
position: relative;
text-align: center;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
transition: all 0.3s;
&:hover {
background-color: #15466b;
cursor: pointer;
}
&:first-of-type {
border-top-left-radius: 250px;
&:hover {
background-image: url("@/assets/svg/home_imge_lt.svg");
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
}
&::after {
content: "";
position: absolute;
width: 50px;
height: 80px;
background-color: #021224;
z-index: 99;
top: 0;
right: -25px;
pointer-events: none;
// 箭头向右
clip-path: polygon(60% 0, 93% 43%, 56% 84%, 7% 85%, 42% 40%, 10% -1%);
}
}
&:nth-of-type(2) {
border-top-right-radius: 250px;
&:hover {
background-image: url("@/assets/svg/home_imge_rt.svg");
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
}
&::after {
content: "";
position: absolute;
width: 80px;
height: 50px;
background-color: #021224;
z-index: 99;
bottom: -25px;
right: 0px;
pointer-events: none;
// 箭头向上
cursor: initial;
clip-path: polygon(56% 11%, 109% 50%, 107% 99%, 58% 60%, 14% 101%, 15% 50%);
}
}
&:nth-of-type(3) {
border-bottom-left-radius: 250px;
&:hover {
background-image: url("@/assets/svg/home_imge_lb.svg");
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
}
&::before {
content: "";
position: absolute;
width: 50px;
height: 80px;
background-color: #021224;
z-index: 99;
bottom: 0;
right: -25px;
pointer-events: none;
// 箭头向右
clip-path: polygon(59% 17%, 98% 56%, 67% 100%, -1% 125%, 45% 56%, 7% 14%);
}
&::after {
content: "";
position: absolute;
width: 80px;
height: 50px;
background-color: #021224;
z-index: 99;
top: -25px;
left: 0px;
pointer-events: none;
// 箭头向上
clip-path: polygon(43% -1%, 83% 37%, 84% 90%, 41% 50%, -18% 101%, -27% 50%);
}
}
&:nth-of-type(4) {
border-bottom-right-radius: 250px;
&:hover {
background-image: url("@/assets/svg/home_imge_rb.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent;
}
}
&:last-of-type {
position: absolute;
width: 160px;
height: 160px;
z-index: 999;
border-radius: 50%;
top: 50%;
left: 50%;
color: #fff;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
transform: translate(-50%, -50%);
font-size: 48px;
transition: all 0.3s;
background-color: #152a3b;
box-shadow: inset 0 0 10px 2px #06b4c9;
&:hover {
color: #06b4c9;
box-shadow: inset 0px 0px 18px 7px #01e9ff;
}
}
}
}
</style>