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 }