h5 右下角浮动按钮, 纯css实现

2017年11月22日19:00:22

效果:

                

代码:

 /** 右下角跳转按钮 跳转到列表 */
 #list_note_icon
 {
     position: fixed;
     bottom: 10%;
     right: 8%;
     z-index:;
     background: #ff9900;
     width: 80px;
     height: 80px;
     border-radius: 40px;
     box-shadow: 2px 2px 2px #888888;
     opacity:0.7 ;
 }

 #list_note_icon:before
 {
     content: "";
     display:block;
     background:#333;
     position:absolute;
     height:3px;
     width:40px;
     top:24px;
     left:20px;
     box-shadow:0 10px #333, 0 20px #333, 0 30px #333;
     -webkit-box-shadow:0 10px #333, 0 20px #333, 0 30px #333;
     -moz-box-shadow:0 10px #333, 0 20px #333, 0 30px #333;
 }

 /** 右下角跳转按钮 跳转到添加页 */
 #add_note_icon
 {
     position: fixed;
     bottom: 10%;
     right: 8%;
     z-index:;
     background: #ff9900;
     width: 80px;
     height: 80px;
     border-radius: 40px;
     box-shadow: 2px 2px 2px #888888;
     opacity:0.7 ;
 }

 #add_note_icon:before, #add_note_icon:after
 {
     content: "";
     display:block;
     background:#333;
     position:absolute;
 }

 #add_note_icon:before
 {
     width: 2px;
     height: 56px;
     left: 39px;
     top: 12px;
 }

 #add_note_icon:after
 {
     width: 56px;
     height: 2px;
     left: 12px;
     top: 39px;
 }