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

2017年11月22日19:00:22

 

效果:

                

 

代码:

 1 /** 右下角跳转按钮 跳转到列表 */
 2 #list_note_icon
 3 {
 4     position: fixed;
 5     bottom: 10%;
 6     right: 8%;
 7     z-index: 888;
 8     background: #ff9900;
 9     width: 80px;
10     height: 80px;
11     border-radius: 40px;
12     box-shadow: 2px 2px 2px #888888;
13     opacity:0.7 ;
14 }
15 
16 #list_note_icon:before
17 {
18     content: "";
19     display:block;
20     background:#333;
21     position:absolute;
22     height:3px;
23     width:40px;
24     top:24px;
25     left:20px;
26     box-shadow:0 10px #333, 0 20px #333, 0 30px #333;
27     -webkit-box-shadow:0 10px #333, 0 20px #333, 0 30px #333;
28     -moz-box-shadow:0 10px #333, 0 20px #333, 0 30px #333;
29 }
30 
31 /** 右下角跳转按钮 跳转到添加页 */
32 #add_note_icon
33 {
34     position: fixed;
35     bottom: 10%;
36     right: 8%;
37     z-index: 888;
38     background: #ff9900;
39     width: 80px;
40     height: 80px;
41     border-radius: 40px;
42     box-shadow: 2px 2px 2px #888888;
43     opacity:0.7 ;
44 }
45 
46 #add_note_icon:before, #add_note_icon:after
47 {
48     content: "";
49     display:block;
50     background:#333;
51     position:absolute;
52 }
53 
54 #add_note_icon:before
55 {
56     width: 2px;
57     height: 56px;
58     left: 39px;
59     top: 12px;
60 }
61 
62 #add_note_icon:after
63 {
64     width: 56px;
65     height: 2px;
66     left: 12px;
67     top: 39px;
68 }