DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<style>
*,*::before,*::after{box-sizing: border-box;-webkit-touch-callout: none; -webkit-user-select:auto;}
html,body{color:#212121;font-family:"微软雅黑"; font-size:16px; border:0px solid red; height:100%; }
body.floatBtnsGroup{background:white; border:0px solid blue; display: flex; justify-content:flex-end; align-items:flex-end; }
body.floatBtnsGroup .container{ width:150px; height:970px; display:block; margin:auto; position:absolute; border:0px solid red; }
body.floatBtnsGroup .container a{ display:flex; justify-content:center; align-items:center; font-size:1rem; }
body.floatBtnsGroup .container a .btnName{ font-size:28px; opacity:0; color: #fc4548; line-height: 48px; text-align:center; }
.menu_opener {display: none;}
.menu_opener:checked ~ .link_one { bottom: 800px;right:0px; }
.menu_opener:checked ~ .link_two { bottom: 600px;right:0px; }
.menu_opener:checked ~ .link_three{ bottom: 400px;right:0px; }
.menu_opener:checked ~ .link_four { bottom: 200px;right:0px; }
.menu_opener:checked ~ .link_one .btnName{ opacity:1; }
.menu_opener:checked ~ .link_two .btnName{opacity:1;}
.menu_opener:checked ~ .link_three .btnName {opacity:1;}
.menu_opener:checked ~ .link_four .btnName {opacity:1; }
.menu_opener:checked ~ .barre_hamburger {opacity: 0;}
.menu_opener:checked ~ .menu_opener_label:after {transform:rotate(45deg); top:70px; }
.menu_opener:checked ~ .menu_opener_label:before {transform:rotate(-45deg); top:70px; }
.menu_opener_label {background:#fc4548; width:150px;height:150px; display:block; cursor:pointer; border-radius:50%; position:absolute; bottom:0; right:0; z-index:10;}
.menu_opener_label:after {position: absolute;top: 50px;left: 50px;background: #fff;content: "";width: 50px;height: 10px;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
.menu_opener_label:before {position: absolute;top: 90px;left: 50px;background: #fff;content: "";width: 50px;height: 10px;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
.barre_hamburger{ width:50px; height:10px; position:absolute; bottom: 70px;right: 50px; background:#fff; z-index:20; -webkit-transition: all 0.4s ease;transition: all 0.4s ease; }
.link_general{ width:150px; height:150px; display:block; border-radius:50%; position:absolute; bottom:0; right:0; background:#fbeaee; -webkit-transition:all 0.4s ease; transition: all 0.4s ease; }
style>
head>
<body class="floatBtnsGroup" >
<div class="container">
<input type="checkbox" id="menu_opener_id" class="menu_opener">
<label for="menu_opener_id" class="menu_opener_label">label>
<div class="barre_hamburger">div>
<a href="#" class="link_one link_general">
<span class="btnName" >需协调解决问题span>
a>
<a href="#" class="link_two link_general">
<span class="btnName" >进度低于10%span>
a>
<a href="#" class="link_three link_general">
<span class="btnName" >未汇报span>
a>
<a href="#" class="link_four link_general">
<span class="btnName" >未认领span>
a>
div>
body>
html>