浮动操作按钮与圆形菜单

Question

我想创建一个显示循环菜单

的浮动操作按钮

是否可以使用纯css

来实现

Answer 1

我选择了随机图标。如果您需要更改，请使用 font-awsome 页面中的图标，并将班级名称替换为受尊重的图标

＆＃13;

＆＃13;

.main{
	color:#222;
  z-index:1000;
  position:absolute;
  width:45px;
  height:45px;
  bottom:50px;
  float:right;
  right:200px;
  display: table-cell;
  vertical-align: middle;
  background-color:#00affd;
  text-align: center;
  box-shadow:1px 2px 10px #555;
  border-radius:100%;
  color:#fff;
  transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550); 
  cursor:pointer;
}
.main{
line-height:45px !important;
}
.main:focus > .cir {
  opacity:1;
  width:100px;
  height:100px;
   transform-style: preserve-3d;
}
p{
opacity:0;
position: relative;
    float: right;
    left: -58px;
    /* width: 50px; */
    line-height: normal;
    top: -60px;
    padding: 2px 10px;
    height: 20px;
    border-radius: 3px;
    background: #9E9E9E;
      box-shadow:1px 2px 10px #555;
}
.main:hover > p{
opacity:1;
}
.cir{
  z-index:2;
  opacity:0;
  position:absolute;
 right:50%;
 bottom:50%;
  width:10px;
  height:10px;
border-radius:100%;
transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550); 
}
*{outline:none;}

＆＃13;

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<div  class="main" tabindex="1">X
  <div class="cir">
  <a class="main fa fa-user-circle " style="left:80%;bottom:90%;"><p>contact</p></a>
  <a class="main fa fa-whatsapp" style="left:30%;bottom:55%;"><p>WhatsApp</p></a>
  <a class="main fa fa-twitter-square" style="left:5%;bottom:10%;"><p>Twitter</p></a>
  <a  class="main fa fa-google-plus"  style="left:-15%;bottom:-40%;"><p>Google</p></a>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;