最后接手一个项目，需要给平台做一个在线客服，在网上闲逛，发现了一个很漂亮的悬浮在线客服，申明一下，来自https://www.changliaokf.com/detail/servicecode/53.html，先来引效果图，大家看看怎么样？
这样子不错吧！
这个是采用jquery制作的，那就先来jquery代码吧
1 (function($) { 2 setInterval(function(){ 3 if($(".animated-circles").hasClass("animated")){ 4 $(".animated-circles").removeClass("animated"); 5 }else{ 6 $(".animated-circles").addClass(\'animated\'); 7 } 8 },3000); 9 var wait = setInterval(function(){ 10 $(".livechat-hint").removeClass("show_hint").addClass("hide_hint"); 11 clearInterval(wait); 12 },4500); 13 $(".livechat-girl").hover(function(){ 14 clearInterval(wait); 15 $(".livechat-hint").removeClass("hide_hint").addClass("show_hint"); 16 },function(){ 17 $(".livechat-hint").removeClass("show_hint").addClass("hide_hint"); 18 }).click(function(){ 19 if(isMobile){ 20 window.location.href = \'http://www.baidu.com\'; 21 }else{ 22 var oWidth = 606, 23 oHeight = 630, 24 top = ($(window).height()/2)-(oHeight/2), 25 left = ($(window).width()/2)-(oWidth/2); 26 window.open(\'http://www.baidu.com\',\'\',\'width=\'+oWidth+\',height=\'+oHeight+\',scrollbars=yes,top=\'+top+\',left=\'+left+\',resizable=yes\'); 27 } 28 }); 29 })(jQuery);
再来看看css代码
1 @charset "utf-8"; 2 blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, html, input, li, ol, p, pre, ul { 3 padding: 0; 4 margin: 0 5 } 6 address, caption, cite, code, em, h1, h2, h3, h4, h5, h6, pre, strong, table, td, th { 7 font-size: 1em; 8 font-style: normal; 9 font-weight: 400 10 } 11 strong { 12 font-weight: 700 13 } 14 ol, ul { 15 list-style: none outside none 16 } 17 fieldset, img { 18 border: medium none; 19 vertical-align: bottom 20 } 21 caption, th { 22 text-align: left 23 } 24 table { 25 border-collapse: collapse; 26 border-spacing: 0 27 } 28 body { 29 background: none repeat scroll 0 0 #FFF; 30 color: #333; 31 font: 12px/1 "微软雅黑", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif 32 } 33 input, select, textarea { 34 font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif 35 } 36 a { 37 outline: medium none 38 } 39 a:active, a:link, a:visited { 40 text-decoration: none; 41 color: #000 42 } 43 a:hover { 44 text-decoration: underline 45 } 46 cite, em, i { 47 font-styleign: center 48 } 49 html { 50 min-height: 101% 51 } 52 .clearfix:after { 53 clear: both; 54 content: "."; 55 display: block; 56 height: 0; 57 line-height: 0; 58 visibility: hidden 59 } 60 .clearfix { 61 display: inline-block 62 } 63 html[xmlns] .clearfix { 64 display: block 65 } 66 *html .clearfix { 67 height: 1% 68 } 69 time { 70 color: #777 71 } 72 article, aside, dialog, figure, footer, header, menu, nav, section { 73 display: block 74 } 75 ul { 76 list-style: none 77 } 78 a { 79 text-decoration: none 80 } 81 .clear { 82 clear: both 83 } 84 * { 85 margin: 0; 86 padding: 0 87 } 88 .f-l { 89 float: left 90 } 91 .f-r { 92 float: right 93 } 94 .clearfix:after { 95 content: "/20"; 96 display: block; 97 visibility: hidden; 98 clear: both; 99 font-size: 0; 100 line-height: 0; 101 height: 0 102 } 103 @keyframes scaleToggleOne { 104 0 { 105 transform:scale(1); 106 -webkit-transform:scale(1) 107 } 108 50% { 109 transform:scale(2); 110 -webkit-transform:scale(2) 111 } 112 100% { 113 transform:scale(1); 114 -webkit-transform:scale(1) 115 } 116 } 117 @keyframes scaleToggleTwo { 118 0 { 119 transform:scale(1); 120 -webkit-transform:scale(1) 121 } 122 20% { 123 transform:scale(1); 124 -webkit-transform:scale(1) 125 } 126 60% { 127 transform:scale(2); 128 -webkit-transform:scale(2) 129 } 130 100% { 131 transform:scale(1); 132 -webkit-transform:scale(1) 133 } 134 } 135 @keyframes scaleToggleThree { 136 0 { 137 transform:scale(1); 138 -webkit-transform:scale(1) 139 } 140 33% { 141 transform:scale(1); 142 -webkit-transform:scale(1) 143 } 144 66% { 145 transform:scale(2); 146 -webkit-transform:scale(2) 147 } 148 100% { 149 transform:scale(1); 150 -webkit-transform:scale(1) 151 } 152 } 153 .animated { 154 -webkit-animation-duration: .5s; 155 animation-duration: .5s; 156 -webkit-animation-fill-mode: both; 157 animation-fill-mode: both 158 } 159 .livechat-girl { 160 width: 60px; 161 height: 60px; 162 border-radius: 50%; 163 position: fixed; 164 bottom: 0; 165 right: 40px; 166 opacity: 0; 167 -webkit-box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); 168 box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); 169 z-index: 700; 170 transform: translateY(0); 171 -webkit-transform: translateY(0); 172 -ms-transform: translateY(0); 173 cursor: pointer; 174 -webkit-transition: all 1s cubic-bezier(.86, 0, .07, 1); 175 transition: all 1s cubic-bezier(.86, 0, .07, 1) 176 } 177 .livechat-girl:focus { 178 outline: 0 179 } 180 .livechat-girl.animated { 181 opacity: 1; 182 transform: translateY(-40px); 183 -webkit-transform: translateY(-40px); 184 -ms-transform: translateY(-40px) 185 } 186 .livechat-girl:after { 187 content: \'\'; 188 width: 12px; 189 height: 12px; 190 border-radius: 50%; 191 background-image: linear-gradient(to bottom, #26c7fc, #26c7fc); 192 position: absolute; 193 right: 1px; 194 top: 1px; 195 z-index: 50 196 } 197 .livechat-girl .girl { 198 position: absolute; 199 top: 0; 200 left: 0; 201 width: 100%; 202 height: auto; 203 z-index: 50 204 } 205 .livechat-girl .animated-circles .circle { 206 background: rgba(38,199,252,.25); 207 width: 60px; 208 height: 60px; 209 border-radius: 50%; 210 position: absolute; 211 z-index: 49; 212 transform: scale(1); 213 -webkit-transform: scale(1) 214 } 215 .livechat-girl .animated-circles.animated .c-1 { 216 animation: 2s scaleToggleOne cubic-bezier(.25, .46, .45, .94) forwards 217 } 218 .livechat-girl .animated-circles.animated .c-2 { 219 animation: 2.5s scaleToggleTwo cubic-bezier(.25, .46, .45, .94) forwards 220 } 221 .livechat-girl .animated-circles.animated .c-3 { 222 animation: 3s scaleToggleThree cubic-bezier(.25, .46, .45, .94) forwards 223 } 224 .livechat-girl.animation-stopped .circle { 225 opacity: 0!important 226 } 227 .livechat-girl.animation-stopped .circle { 228 opacity: 0!important 229 } 230 .livechat-girl .livechat-hint { 231 position: absolute; 232 right: 40px; 233 top: 50%; 234 margin-top: -20px; 235 opacity: 0; 236 z-index: 0; 237 -webkit-transition: all .3s cubic-bezier(.86, 0, .07, 1); 238 transition: all .3s cubic-bezier(.86, 0, .07, 1) 239 } 240 .livechat-girl .livechat-hint.show_hint { 241 -webkit-transform: translateX(-40px); 242 transform: translateX(-40px); 243 opacity: 1 244 } 245 .livechat-girl .livechat-hint.hide_hint { 246 opacity: 0; 247 -webkit-transform: translateX(0); 248 transform: translateX(0) 249 } 250 .livechat-girl .livechat-hint.rd-notice-tooltip { 251 max-width: 1296px!important 252 } 253 .livechat-girl .livechat-hint.rd-notice-tooltip .rd-notice-content { 254 width: auto; 255 overflow: hidden; 256 text-overflow: ellipsis 257 } 258 259 @media only screen and (max-width:1599px) { 260 .livechat-girl .livechat-hint.rd-notice-tooltip { 261 max-width: 1060px!important 262 } 263 } 264 265 @media only screen and (max-width:1309px) { 266 .livechat-girl .livechat-hint.rd-notice-tooltip { 267 max-width: 984px!important 268 } 269 } 270 271 @media only screen and (max-width:1124px) { 272 .livechat-girl .livechat-hint.rd-notice-tooltip { 273 max-width: 600px!important 274 } 275 } 276 .rd-notice-tooltip { 277 -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2); 278 box-shadow: 0 2px 2px rgba(0,0,0,.2); 279 font-size: 14px; 280 border-radius: 3px; 281 line-height: 1.25; 282 position: absolute; 283 z-index: 65; 284 max-width: 350px; 285 opacity: 1 286 } 287 .rd-notice-tooltip:after { 288 position: absolute; 289 display: block; 290 content: \'\'; 291 height: 20px; 292 width: 20px; 293 -webkit-box-shadow: none; 294 box-shadow: none; 295 -webkit-transform: rotate(-45deg); 296 -moz-transform: rotate(-45deg); 297 -ms-transform: rotate(-45deg); 298 -o-transform: rotate(-45deg); 299 transform: rotate(-45deg); 300 -webkit-border-radius: 3px; 301 -moz-border-radius: 3px; 302 border-radius: 3px; 303 z-index: 50 304 } 305 .rd-notice-tooltip .rd-notice-content { 306 background: 0; 307 border-radius: 3px; 308 width: 100%; 309 color: #fff; 310 position: relative; 311 z-index: 60; 312 padding: 20px; 313 font-weight: 400; 314 line-height: 1.45 315 } 316 .rd-notice-type-success { 317 background-color: #26c7fc; 318 -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); 319 box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) 320 } 321 .rd-notice-type-success .rd-notice-content { 322 background-color: #26c7fc 323 } 324 .rd-notice-type-success:after { 325 background-color: #26c7fc; 326 -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); 327 box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) 328 } 329 .rd-notice-position-left { 330 margin-left: -20px 331 } 332 .rd-notice-position-left:after { 333 right: -6px; 334 top: 50%; 335 margin-top: -10px 336 } 337 .rd-notice-tooltip.single-line .rd-notice-content { 338 height: 40px; 339 padding: 0 20px; 340 line-height: 40px; 341 white-space: nowrap 342 }
最后再来看看html代码
1 <div class="livechat-girl animated"> <img class="girl" src="images/en_3.png"> 2 <div class="livechat-hint rd-notice-tooltip rd-notice-type-success rd-notice-position-left single-line show_hint"> 3 <div class="rd-notice-content">嘿，我来帮您！</div> 4 </div> 5 <div class="animated-circles"> 6 <div class="circle c-1"></div> 7 <div class="circle c-2"></div> 8 <div class="circle c-3"></div> 9 </div> 10 </div>
这就是全部了。