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 }
效果:
