一个纯HTML+css完成的悬浮
主要用到了css3的一些东西，包括transition过渡、transform转换，transform中包含translate、rotate（旋转）、scale（放大）、matrix（翻转）等属性，这里只用到了translate属性，窗口固定fixed，还使用伪类hover完成，以及利用伪类after的border属性画三角形的小例子，还用到了渐变色linear-gradient 的属性。
其中css3中的许多属性都会涉及到兼容性的问题，如transition、transform、linear-gradient都会有不同内核不兼容的问题，处理css3 这方面的兼容性问题多些几条不同浏览器的写法就行；
safari 是 Webkit内核，chrome浏览器Webkit内核，现在是Blink内核 -webkit- ；firefox浏览器 Gecko内核，俗称Firefox内核 -moz- ；ie内核 ， Trident内核 -ms- ； Opera 最初是自己的Presto内核，后来是Webkit，现在是Blink内核 -o- ；
代码还不够完善，因为这是之前写的，有很多细节没完善号，兼容都没写完，现在想还可以用js把 回到顶部做成滑动的；
下面是代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>xuanfu</title> 6 <!--<link rel="stylesheet" href="" type="text/css">--> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 .all { 14 position: fixed; /*窗口固定定位*/ 15 right: 0px; 16 top: 70%; 17 width: 60px; 18 margin-top: -90px; 19 z-index: 999; 20 box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); /*阴影*/ 21 } 22 23 .all ul { 24 list-style: none; 25 } 26 27 .all ul li { 28 width: 60px; 29 width: 60px; 30 height: 60px; 31 line-height: 60px; 32 position: relative; /*相对*/ 33 border-bottom: 1px solid #FFFFFF; 34 z-index: 2; 35 } 36 37 .all ul li a { 38 position: absolute; /*绝对*/ 39 top: 0px; 40 left: 0px; 41 display: block; 42 color: #FFFFFF; 43 width: 60px; 44 height: 60px; 45 line-height: 60px; 46 z-index: 2; 47 text-decoration: none; /*下划线样式*/ 48 -webkit-transition: all 0.6s; 49 -ms-transition: all 0.6s; 50 -moz-transition: all 0.6s; 51 } 52 53 .all ul li a img { 54 width: 30px; 55 position: absolute; 56 top: 15px; 57 left: 15px; 58 z-index: 2; 59 } 60 61 .all-title { 62 position: absolute; 63 left: 0px; 64 bottom: 1px; 65 width: 80px; 66 height: 40px; 67 line-height: 40px; 68 text-align: center; 69 color: white; 70 -webkit-transition: all 0.6s; /*2d3d转换*/ 71 -ms-transition: all 0.6s; 72 -moz-transition: all 0.6s; 73 background-color: white; 74 box-shadow: 0px 0px 10px rgba(0,0,0,0.5); /*阴影*/ 75 z-index: 1; 76 opacity: 0; /*不透明度*/ 77 } 78 79 .all-title:before { /*在这之前插入，内容为小尖角*/ 80 position: absolute; 81 display: block; 82 width: 10px; 83 height: 10px; 84 content: ''; 85 right: -5px; 86 top: 14px; 87 background-color: white; 88 -webkit-transform: rotate(45deg); 89 } 90 91 .all li:hover .all-title { 92 left: -88px; 93 opacity: 1; 94 } 95 96 li a { 97 background-image: -webkit-linear-gradient(left, #f60, #ffb443); 98 background-image: -moz-linear-gradient(left, #f60, #ffb443); 99 background-image: -ms-linear-gradient(left, #f60, #ffb443); 100 } 101 102 .all-title { 103 background-color: #f60; 104 } 105 106 .all-title:before { 107 background-color: #f60; 108 } 109 110 li.wuyou-contact a { 111 background-image: -webkit-linear-gradient(left, #00b7ee, #55d8ff); 112 background-image: -moz-linear-gradient(left, #00b7ee, #55d8ff); 113 background-image: -ms-linear-gradient(left, #00b7ee, #55d8ff); 114 } 115 116 li.wuyou-contact .all-title { 117 background-color: #00b7ee; 118 } 119 120 li.wuyou-contact .all-title:before { 121 background-color: #00b7ee; 122 } 123 124 li.wuyou-top a { 125 background-image: -webkit-linear-gradient(left, #333, #666); 126 background-image: -moz-linear-gradient(left, #333, #666); 127 background-image: -ms-linear-gradient(left, #333, #666); 128 } 129 130 li.wuyou-top .all-title { 131 background-color: #333; 132 } 133 134 li.wuyou-top .all-title:before { 135 background-color: #333; 136 } 137 138 </style> 139 </head> 140 <body style="height: 2000px"> 141 <div class="all"> 142 <ul> 143 <li> 144 <a href="#"><img src="img/taobao.png" alt="" ></a> 145 <div class="all-title">淘宝官网</div> 146 </li> 147 <li class="wuyou-contact"> 148 <a href="#"><img src="img/aliwangwang.png" alt="" ></a> 149 <div class="all-title">联系客服</div> 150 </li> 151 <li class="wuyou-top"> 152 <a href="#"><img src="img/vertical-align-top.png" alt="" ></a> 153 <div class="all-title">回到顶部</div> 154 </li> 155 </ul> 156 </div> 157 158 </body> 159 </html>