css实现网站底部客服悬浮效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：css实现网站底部客服悬浮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, html, input, li, ol, p, pre, ul { padding: 0; margin: 0 }
address, caption, cite, code, em, h1, h2, h3, h4, h5, h6, pre, strong, table, td, th { font-size: 1em; font-style: normal; font-weight: 400 }
strong { font-weight: 700 }
ol, ul { list-style: none outside none }
fieldset, img { border: medium none; vertical-align: bottom }
caption, th { text-align: left }
table { border-collapse: collapse; border-spacing: 0 }
body { background: none repeat scroll 0 0 #FFF; color: #333; font: 12px/1 "微软雅黑", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif }
input, select, textarea { font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif }
a { outline: medium none }
a:active, a:link, a:visited { text-decoration: none; color: #000 }
a:hover { text-decoration: underline }
cite, em, i { font-styleign: center }
html { min-height: 101% }
.clearfix:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden }
.clearfix { display: inline-block }
html[xmlns] .clearfix { display: block }
*html .clearfix { height: 1% }
time { color: #777 }
article, aside, dialog, figure, footer, header, menu, nav, section { display: block }
ul { list-style: none }
a { text-decoration: none }
.clear { clear: both }
* { margin: 0; padding: 0 }
.f-l { float: left }
.f-r { float: right }
.clearfix:after { content: "/20"; display: block; visibility: hidden; clear: both; font-size: 0; line-height: 0; height: 0 }
 
@keyframes scaleToggleOne { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
50% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
@keyframes scaleToggleTwo { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
20% {
transform:scale(1);
-webkit-transform:scale(1)
}
60% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
@keyframes scaleToggleThree { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
33% {
transform:scale(1);
-webkit-transform:scale(1)
}
66% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
.animated { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.livechat-girl { width: 60px; height: 60px; border-radius: 50%; position: fixed; bottom: 0; right: 40px; opacity: 0; -webkit-box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); z-index: 700; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); cursor: pointer; -webkit-transition: all 1s cubic-bezier(.86, 0, .07, 1); transition: all 1s cubic-bezier(.86, 0, .07, 1) }
.livechat-girl:focus { outline: 0 }
.livechat-girl.animated { opacity: 1; transform: translateY(-40px); -webkit-transform: translateY(-40px); -ms-transform: translateY(-40px) }
.livechat-girl:after { content: ''; width: 12px; height: 12px; border-radius: 50%; background-image: linear-gradient(to bottom, #26c7fc, #26c7fc); position: absolute; right: 1px; top: 1px; z-index: 50 }
.livechat-girl .girl { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 50 }
.livechat-girl .animated-circles .circle { background: rgba(38,199,252,.25); width: 60px; height: 60px; border-radius: 50%; position: absolute; z-index: 49; transform: scale(1); -webkit-transform: scale(1) }
.livechat-girl .animated-circles.animated .c-1 { animation: 2s scaleToggleOne cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-2 { animation: 2.5s scaleToggleTwo cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-3 { animation: 3s scaleToggleThree cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl .livechat-hint { position: absolute; right: 40px; top: 50%; margin-top: -20px; opacity: 0; z-index: 0; -webkit-trans.........完整代码请登录后点击上方下载按钮下载查看