本站客服服务代码,看好拿走。

 本站客服服务代码,看好拿走。本人在找win7主题的时候,看到一家网站样式不错,美化了一下网站,觉得客服样式不错,搞过来玩玩,也分享给你们,看好可以拿走了,直接考代码加入网站就可以了,本人自己也会写,不想动手写,可能比他写的还好看。不多说了,下面就是源代码了,本站有改动过。

<!--客服服务-->

<div class="kefu hodss">

<div class="livechat-girl dhha"> <a href="https://naiman5188.com/79.html" ><img class="girl" src="https://dl.zhutix.net/2019/07/en_3.png"></a>

  <div class="livechat-hint rd-notice-tooltip rd-notice-type-success rd-notice-position-left single-line show_hint">

    <div class="rd-notice-content">嘿,不懂的来问我哦!</div>

  </div>

  <a href="https://zhutix.com/contact/" target="_blank">

    <div class="dhha-circles">

    <div class="circle c-1"></div>

    <div class="circle c-2"></div>

    <div class="circle c-3"></div>

  </div>

    </a>

</div>

<style type="text/css">

@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)}}.dhha{-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;left: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.dhha{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 .dhha-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 .dhha-circles.dhha .c-1{animation:2s scaleToggleOne cubic-bezier(.25,.46,.45,.94) forwards}.livechat-girl .dhha-circles.dhha .c-2{animation:2.5s scaleToggleTwo cubic-bezier(.25,.46,.45,.94) forwards}.livechat-girl .dhha-circles.dhha .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;left:140px;top:50%;margin-top:-20px;opacity:0;z-index:0;-webkit-transition:all .3s cubic-bezier(.86,0,.07,1);transition:all .3s cubic-bezier(.86,0,.07,1)}.livechat-girl .livechat-hint.show_hint{-webkit-transform:translateX(-40px);transform:translateX(-40px);opacity:1}.livechat-girl .livechat-hint.hide_hint{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.livechat-girl .livechat-hint.rd-notice-tooltip{max-width:1296px!important}.livechat-girl .livechat-hint.rd-notice-tooltip .rd-notice-content{width:auto;overflow:hidden;text-overflow:ellipsis}@media only screen and (max-width:1599px){.livechat-girl .livechat-hint.rd-notice-tooltip{max-width:1060px!important}}@media only screen and (max-width:1309px){.livechat-girl .livechat-hint.rd-notice-tooltip{max-width:984px!important}}@media only screen and (max-width:1124px){.livechat-girl .livechat-hint.rd-notice-tooltip{max-width:600px!important}}.rd-notice-tooltip{-webkit-box-shadow:0 2px 2px rgba(0,0,0,.2);box-shadow:0 2px 2px rgba(0,0,0,.2);font-size:14px;border-radius:3px;line-height:1.25;position:absolute;z-index:65;max-width:350px;opacity:1}.rd-notice-tooltip:after{position:absolute;display:block;content:'';height:20px;width:20px;-webkit-box-shadow:none;box-shadow:none;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;z-index:50}.rd-notice-tooltip .rd-notice-content{background:0;border-radius:3px;width:100%;color:#fff;position:relative;z-index:60;padding:20px;font-weight:400;line-height:1.45}.rd-notice-type-success{background-color:#26c7fc;-webkit-box-shadow:0 5px 10px 0 rgba(38,199,252,.2);box-shadow:0 5px 10px 0 rgba(38,199,252,.2)}.rd-notice-type-success .rd-notice-content{background-color:#26c7fc}.rd-notice-type-success:after{background-color:#26c7fc;-webkit-box-shadow:0 5px 10px 0 rgba(38,199,252,.2);box-shadow:0 5px 10px 0 rgba(38,199,252,.2)}.rd-notice-position-left{margin-left:-20px}.rd-notice-position-left:after{left:-6px;top:50%;margin-top:-10px}.rd-notice-tooltip.single-line .rd-notice-content{height:40px;padding:0 20px;line-height:40px;white-space:nowrap}

</style>

<script type="text/javascript">(function($){setInterval(function(){if($(".dhha-circles").hasClass("dhha")){$(".dhha-circles").removeClass("dhha")}else{$(".dhha-circles").addClass('dhha')}},3000);var wait=setInterval(function(){$(".livechat-hint").removeClass("show_hint").addClass("hide_hint");clearInterval(wait)},4500);$(".livechat-girl").hover(function(){clearInterval(wait);$(".livechat-hint").removeClass("hide_hint").addClass("show_hint")},function(){$(".livechat-hint").removeClass("show_hint").addClass("hide_hint")}).click(function(){if(isMobile){window.location.href='https://zhutix.com/contact/'}else{var oWidth=606,oHeight=630,top=($(window).height()/2)-(oHeight/2),left=($(window).width()/2)-(oWidth/2)}})})(jQuery);</script>

</div>

  <!--客服服务结束-->


最后修改:2019 年 08 月 02 日 02 : 37 PM

发表评论