极客观点
项目管理
HarmonyOS
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿遥控器按钮</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.content{
width: 400px;height: 400px;position: relative;margin:100px auto;left: 0;top:50%;bottom: 0;right:0;
box-shadow: 0px 0px 110px rgba(180, 180, 180, 0.3) inset,0px 0px 5px #D3D3D3;
}
.quartercircle{
position:absolute;width: 200px;height: 200px;-webkit-border-radius: 200px 0 0 0;
}
.divLeft{
top: 25%;left: -10%; transform:rotate(-45deg);background-color: bisque ;
}
.divTop{
top: -10%;left: 25%; transform:rotate(45deg);background-color: burlywood ;
}
.divRight{
top: 25%;left: 60%;transform:rotate(135deg);background-color: darkgray ;
}
.divBottom{
top: 60%;left: 25%;transform:rotate(-135deg);background-color: darkkhaki ;
}
.circle{
width:50%;height:50%;position: absolute;z-index: 100;top:0%;left:0%;bottom:0;right: 0;margin:auto;border-radius: 100%;background-color: #889900;text-align: center;
}
.circle span{
display: block;width: 100%;height: 100%;line-height: 200px;font-size: 24px;
}
.quartercircle a{
position: absolute;width: 100%;height: 100%;
background: #888888;
}
.quartercircle a:hover{
background: #8BFF7C;
}
</style>
<body>
<div class="content" style="">
<div class="quartercircle divLeft" style="">
<a href="#" style="background: url(left.png) no-repeat center;"></a>
</div>
<div class="quartercircle divTop" style="">
<a href="#" style="background: url(top.png) no-repeat center;"></a>
</div>
<div class="quartercircle divRight" style="">
<a href="#" style="background: url(left.png) no-repeat center;"></a>
</div>
<div class="quartercircle divBottom" style="">
<a href="#" style="display:block;position:absolute;z-index:50;background: url(bottom.png) no-repeat center;"></a>
</div>
<div class="circle" style=""><span style="">OK</span></div>
</div>
</body>
</html>
js获取及判断键盘按键的方法