提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
基于https://blog.csdn.net/zhangtff/article/details/89458797的文章,不使用图片绘制简易云台操作面板。
1.html片段
代码如下(示例):
<div class="pie">
<div class="slice-one slice">
<div class="dv"><div class="sj"></div></div>
</div>
<div class="slice-two slice">
<div class="dv"><div class="sj"></div></div>
</div>
<div class="slice-three slice">
<div class="dv"><div class="sj"></div></div>
</div>
<div class="slice-four slice">
<div class="dv"><div class="sj"></div></div>
</div>
<div class="slice-five slice">
<div class="dv"><div class="sj"></div></div>
</div>
<div class="slice-six slice">
<div class="dv"><div class="sj"></div></div>
</div>
<div class="slice-seven slice">
<div class="dv"><div class="sj"></div></div>
</div>
<div class="slice-eight slice">
<div class="dv"><div class="sj"></div></div>
</div>
<div class="center"></div>
</div>
2.css片段
代码如下(示例):
.pie {
transform: scale3d(1.22, 1.22, 1.22);
position: relative;
margin: 20px auto;
padding: 0;
width: 200px;
height: 200px;
border-radius: 50%;
list-style: none;
overflow: hidden;
/* background: url('../../assets/images/blue.png') no-repeat center center / 100% 100%; */
.center {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 50px;
border-radius: 50%;
background-color: white;
&::after {
content: "";
position: absolute;
width: 50px;
height: 50px;
top: 25px;
left: 25px;
border-radius: 50%;
background-color: #f1f5fd;
}
}
.slice {
background-color: #f1f5fd;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
border-left: 3px solid white;
&:active {
background-color: #268cf2;
.dv .sj {
border-bottom: 10px solid white;
}
}
// border-bottom: 5px solid white;
.dv {
transform: skewY(45deg) rotate(22.5deg);
margin-top: 105px;
margin-left: 15px;
.sj {
position: fixed;
bottom: 0;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #268cf2;
border-left: 10px solid transparent;
}
}
&.slice-one {
transform: rotate(-22.5deg) skewY(-45deg);
}
&.slice-two {
transform: rotate(22.5deg) skewY(-45deg);
}
&.slice-three {
transform: rotate(67.5deg) skewY(-45deg);
}
&.slice-four {
transform: rotate(112.5deg) skewY(-45deg);
}
&.slice-five {
transform: rotate(157.5deg) skewY(-45deg);
}
&.slice-six {
transform: rotate(202.5deg) skewY(-45deg);
}
&.slice-seven {
transform: rotate(247.5deg) skewY(-45deg);
}
&.slice-eight {
transform: rotate(292.5deg) skewY(-45deg);
}
}
}