');background-size:100% auto;width:18px;height:6px;filter:alpha(opactiy=0);-ms-filter:"alpha(opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;content:'';position:absolute;z-index:10}[data-balloon][data-balloon-pos=up]:before{bottom:100%;left:50%;margin-bottom:11px;-webkit-transform:translate3d(-50%,10px,0);-moz-transform:translate3d(-50%,10px,0);-ms-transform:translate3d(-50%,10px,0);transform:translate3d(-50%,10px,0);-webkit-transform-origin:top;-moz-transform-origin:top;-ms-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up]:after{bottom:100%;left:50%;margin-bottom:5px;-webkit-transform:translate3d(-50%,10px,0);-moz-transform:translate3d(-50%,10px,0);-ms-transform:translate3d(-50%,10px,0);transform:translate3d(-50%,10px,0);-webkit-transform-origin:top;-moz-transform-origin:top;-ms-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=left]:before{margin-right:11px;right:100%;top:50%;-webkit-transform:translate3d(10px,-50%,0);-moz-transform:translate3d(10px,-50%,0);-ms-transform:translate3d(10px,-50%,0);transform:translate3d(10px,-50%,0)}[data-balloon][data-balloon-pos=left]:after{background:no-repeat url('data:image/svg+xml;utf8,');background-size:100% auto;width:6px;height:18px;margin-right:5px;right:100%;top:50%;-webkit-transform:translate3d(10px,-50%,0);-moz-transform:translate3d(10px,-50%,0);-ms-transform:translate3d(10px,-50%,0);transform:translate3d(10px,-50%,0)}:root{--theme-color:#f1404b;--theme-color2:#ff49cd;--theme-muted-color:#555;--focus-color:var(--theme-color);--focus-shadow-color:rgba(249,100,90,.15);--key-color:#333;--main-color:#515255;--main-shadow:rgba(16,16,16,.4);--shadow-color:rgba(249,100,90,.6);--body-color:#555658;--body-bg-color:#f5f6f7;--main-bg-color:#fff;--transparent-bg-color:rgba(130,130,130,.1);--main-blur-bg-color:rgba(255,255,255,.85);--btn-blur-bg-color:rgba(61,62,64,.5);--btn-blur-color:#ddd;--muted-bg-color:#eee;--theme-bg-color:rgba(249,100,90,.1);--theme-border-radius:12px;--theme-border-radius-md:8px;--theme-border-radius-sm:6px}.ioc-dark-mode{--main-color:#c2c3c6;--theme-muted-color:#bbb;--body-color:#ccc;--body-bg-color:#202225;--main-bg-color:#292c2f;--main-blur-bg-color:rgba(41,44,47,.85);--btn-blur-bg-color:rgba(100,101,103,.5);--btn-blur-color:#888}body{margin:0;overflow-x:hidden;background:var(--body-bg-color);color:var(--body-color);font-family:"SF Pro SC","SF Pro Text","SF Pro Icons",PingFang SC,Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif!important}body a{color:var(--body-color)}a:link,a:visited{text-decoration:none!important}p{margin:0}.entry-content:after,.entry-content:before{content:"";display:table;table-layout:fixed}.entry-content:after{clear:both}.hentry{margin:0 0 1.5em}#emojis_link{padding:5px;line-height:30px;margin:0 0 0 -8px;max-width:246px;max-height:180px;height:auto;overflow:auto;background:#fff;border-radius:0 10px 10px;position:absolute;z-index:999;box-shadow:0px 20px 20px -5px rgba(39,45,68,.15)}#emojis_link img{width:30px;height:30px}.logo img{height:40px}.logo-light{display:inherit}.logo-dark{display:none}.text-hide{position:absolute;font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.border-radius-md{border-radius:var(--theme-border-radius-md)}.null-loading{background:linear-gradient(115deg,rgba(121,121,121,.1) 25%,rgba(121,121,121,.2) 37%,rgba(121,121,121,.1) 63%);-webkit-animation:placeholder-horizontal 1.5s ease infinite!important;animation:placeholder-horizontal 1.5s ease infinite!important;background-size:400% 100%!important}@-webkit-keyframes placeholder-horizontal{0%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes placeholder-horizontal{0%{background-position:100% 50%}100%{background-position:0 50%}}.blur-btn{background:var(--btn-blur-bg-color)!important;-webkit-backdrop-filter:saturate(5) blur(10px);backdrop-filter:saturate(5) blur(10px)}.blur-fixed{background:rgba(0,0,0,.5)!important;-webkit-backdrop-filter:saturate(5) blur(15px);backdrop-filter:saturate(5) blur(15px)}.fixed-body{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;opacity:0;visibility:hidden}header{z-index:1050}.header-normal{position:absolute;top:0;width:100%;margin:10px 0;padding:12px 0}.header-normal .social-group{display:none}@media screen and (min-width:992px){.header-normal{margin:38px 0}}.nav-type-normal{padding-top:84px}.main-navigation{display:none}.mobile-header .mobile-nav{position:fixed;display:block;bottom:0;left:0;top:0;width:82%;max-width:360px;padding:20px;z-index:1040;padding-top:90px;overflow:auto;background:var(--main-bg-color);transform:translateX(-400px)}.mobile-header .fixed-body{z-index:1030}.mobile-nav>.menu{padding:15px;background:var(--transparent-bg-color);border-radius:var(--theme-border-radius)}.social-icons{margin:0 8px;padding:4px;color:var(--theme-muted-color);font-size:20px}.offcanvas-menu-button{float:right;height:40px;width:40px;opacity:.8;z-index:98;font-size:24px;line-height:40px;text-align:center;border-radius:50%}@media screen and (min-width:992px){.header-normal .header-logo{margin-bottom:1rem}.header-normal .social-group{display:block}.main-navigation{display:block}.mobile-nav{display:none}.nav-type-normal{padding-top:200px}.offcanvas-menu-button{display:none}}.scrolling-hide{transform:translateX(0)}.social-group{position:relative}.social-group:before{content:"";position:absolute;width:1px;top:4px;bottom:4px;left:0;background:var(--theme-muted-color)}.nav-search{position:fixed;top:0;left:0;width:100vw;visibility:hidden;transform:translateY(-101%);height:auto;opacity:1;z-index:1080}.search-body{max-width:600px;margin:auto;padding:20px 0}.nav-search-close{display:inline-block;width:40px;height:40px;line-height:40px;margin-top:20px;text-align:center;background:var(--main-bg-color);border-radius:30px}.nav-search .search-body{padding:30px;background:var(--main-bg-color);border-radius:var(--theme-border-radius)}.search-box{position:relative}.search-field{color:var(--main-color);width:100%;padding:8px 20px;padding-right:36px;background:rgba(130,130,130,.15);border:none;border-radius:var(--theme-border-radius-md)}.search-field:-internal-autofill-previewed,.search-field:-internal-autofill-selected{box-shadow:0 0 0 1000px var(--body-bg-color) inset!important;-webkit-text-fill-color:var(--main-color)!important}.nav-search .search-field:-internal-autofill-previewed,.nav-search .search-field:-internal-autofill-selected{box-shadow:0 0 0 1000px var(--main-bg-color) inset!important;-webkit-text-fill-color:var(--main-color)!important}.search-submit{position:absolute;color:var(--main-color);background:0 0;border:none;margin:0;padding:5px;top:50%;right:3px;transform:translateY(-50%);z-index:1}.hot-post{max-height:168px;overflow-y:auto}.btn{color:var(--this-color);background:var(--this-bg);border:1px solid var(--this-border);box-shadow:var(--this-shadow);border-radius:var(--theme-border-radius-md);--this-color:var(--main-color);--this-bg:rgba(136,136,136,.1);--this-border:transparent;--this-shadow:none;--this-hover-color:var(--body-color);--this-hover-bg:rgba(136,136,136,.2)}.vc-theme{--this-color:#eee;--this-hover-color:#fff;--this-bg:var(--theme-color);--this-hover-bg:var(--theme-color2);--this-shadow-bg:var(--shadow-color)}.main-navigation{position:relative}.main-navigation ul{margin:0;padding-left:0;list-style:none}.main-navigation li{font-weight:400;text-transform:uppercase}.main-navigation li a{color:var(--body-color);padding:10px;display:block}.main-navigation .menu>li:first-child>a{margin-left:-10px;position:relative}.main-navigation ul li{position:relative;display:inline-block}.main-navigation ul li.menu-item-has-children{margin-right:5px}.main-navigation ul li.menu-item-has-children:after{content:'\e60d';font-family:"iconfont";position:absolute;top:14px;right:-2px;font-size:12px;-webkit-transform:scale(.6);transform:rotate(0deg) scale(.6)}.main-navigation ul li ul{position:absolute;min-width:160px;opacity:0;overflow:hidden;visibility:hidden;background:#fff;border-radius:12px;padding:4px;box-shadow:0 10px 30px 0px rgba(0,0,0,.3)}.main-navigation ul li ul li{width:100%;font-size:15.5px;font-weight:400;line-height:22px;text-transform:none;margin-bottom:2px}.main-navigation ul li ul li:last-child{margin-bottom:0;border-bottom:none}.sub-menu{z-index:999!important}.crumb-menu{margin-top:10px;font-size:13px;color:#999;white-space:nowrap;word-wrap:normal;text-overflow:ellipsis;overflow:hidden}.crumb-menu a,.crumb-menu a:visited{color:#999}.crumb-menu a:after{content:'22';display:inline-block;position:relative;margin:0 5px;color:var(--theme-color)}.mobile-header ul{margin:0;padding:0;list-style:none}.mobile-header ul li{font-size:16px;text-transform:uppercase}.mobile-header ul li:last-child{border:none}.mobile-header ul li.menu-item-has-children{position:relative}.mobile-header ul li.menu-item-has-children .mobile-dropdown-arrow{position:absolute;text-align:center;top:0;right:0;width:50px;line-height:50px;font-size:12px;color:#888}.mobile-header ul li.menu-item-has-children .mobile-dropdown-arrow:before{content:'';position:absolute;width:30px;height:30px;top:10px;left:10px;border-radius:30px;background:var(--transparent-bg-color)}.mobile-header ul li.menu-item-has-children .mobile-dropdown-arrow i{transform:rotate(0deg)}.mobile-header ul li.menu-item-has-children>a{padding-right:50px}.mobile-header ul li a{display:block;color:var(--body-color);line-height:50px}.mobile-header ul li ul{display:none}.mobile-header ul li ul li{font-size:16px;text-transform:none;border:none}.mobile-header ul li ul li a{padding-left:15px}.mobile-header .sub-menu li{width:calc(50% - 4px);text-align:center;display:inline-block}.mobile-header .sub-menu li>a{position:relative;line-height:normal;padding:6px 4px;margin:2px;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:var(--transparent-bg-color);border-radius:var(--theme-border-radius-sm)}.single-header-image-block{background:rgba(0,0,0,.5);background-size:cover;background-position:center;filter:blur(15px);-webkit-filter:blur(15px);-ms-filter:blur(15px);-moz-filter:blur(15px);filter:progid:DXImageTransform.Microsoft.blur(pixelRadius=15,MakeShadow=false);-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.single-thumbnail,.single-header-image-block{height:400px;width:100%}.container .single-thumbnail,.container .single-header-image-block{height:350px}.single-thumbnail{overflow:hidden;filter:brightness(50%);box-shadow:0 22px 50px -24px rgba(0,0,0,.6);background-color:#fff}.single-thumbnail-card{position:relative}.single-thumbnail{height:400px;width:100%}.container .single-thumbnail{height:350px}.single-thumbnail{overflow:hidden;filter:brightness(50%);box-shadow:0 22px 50px -24px rgba(0,0,0,.6);background-color:#fff}.container .single-thumbnail{border-radius:var(--theme-border-radius)}.single-thumbnail-card .card-img-overlay{top:auto;padding-bottom:20px}.single-title-zone h1{margin-top:6px;margin-bottom:13px;color:#fff;font-size:28px;font-weight:700;letter-spacing:-.3px;line-height:37px}.single-title-zone .date{color:#fff;opacity:.7}.post .entry-content{margin:1.5em 0 0}.post .entry-content p{margin:0 0 20px;line-height:28px}.post .entry-content p a:not(.btn){position:relative;color:var(--theme-color);border-bottom:.0625rem dashed rgba(155,155,155,.2)}.post .entry-content p a:not(.btn):not([data-fancybox]):after{position:absolute;bottom:-.0625rem;left:100%;width:0;border-bottom:.0625rem solid var(--theme-color);content:""}.entry-content pre{margin:0 auto 40px;padding:5px 10px;background:rgba(150,150,150,.2);border-radius:3px}.post .entry-content code{color:var(--theme-color);background:rgba(150,150,150,.2);padding:2px 5px;border-radius:5px}a#cancel-comment-reply-link{color:#fff;background-color:rgba(150,150,150,.5);border-color:rgba(150,150,150,.5);border-radius:.22rem;white-space:normal;padding:10px 15px;font-size:17px;margin-right:10px}#loading-comments{display:none;width:100%;height:45px;background:url(/wp-content/themes/ioswallow/images/comload.gif);text-align:center;background-repeat:no-repeat;background-position:center}.comment-form-validate input[type=checkbox]{visibility:hidden;display:none}.footer-tools{position:fixed;bottom:40px;right:10px;z-index:1040;text-align:center;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.footer-tools a{border:0;font-family:inherit;font-size:100%;font-style:inherit;margin:0;padding:0;vertical-align:baseline}.footer-tools a{background:rgba(55,55,55,.8);font-size:20px;color:var(--btn-blur-color);width:40px;height:40px;line-height:40px;text-align:center;margin-top:6px;display:block;border-radius:25px}.footer-tools .tools-btn{display:none}.buttontop-top{overflow:hidden;visibility:hidden;opacity:0;white-space:nowrap}.button-fx:before,.button-fx:after{position:absolute;content:'';display:block;width:140%;height:100%;left:-20%;z-index:-1000;background-repeat:no-repeat}.button-fx:before{display:none;top:-75%;background-image:radial-gradient(circle,var(--theme-color) 20%,transparent 20%),radial-gradient(circle,transparent 20%,var(--theme-color) 20%,transparent 30%),radial-gradient(circle,var(--theme-color) 20%,transparent 20%),radial-gradient(circle,var(--theme-color) 20%,transparent 20%),radial-gradient(circle,transparent 10%,var(--theme-color) 15%,transparent 20%),radial-gradient(circle,var(--theme-color) 20%,transparent 20%),radial-gradient(circle,var(--theme-color) 20%,transparent 20%),radial-gradient(circle,var(--theme-color) 20%,transparent 20%),radial-gradient(circle,var(--theme-color) 20%,transparent 20%);background-size:10% 10%,20% 20%,15% 15%,20% 20%,18% 18%,10% 10%,15% 15%,10% 10%,18% 18%}.button-fx:after{display:none;bottom:-75%;background-image:radial-gradient(circle,var(--theme-color) 20%,transparent 20%),radial-gradient(circle,var(--theme-color) 20%,transparent 20%),radial-gradient(circle,transparent 10%,var(--theme-color) 15%,transparent 20%),radial-gradient(circle,var(--theme-color) 20%,transparent 20%),radial-gradient(circle,var(--theme-color) 20%,transparent 20%),radial-gradient(circle,var(--theme-color) 20%,transparent 20%),radial-gradient(circle,var(--theme-color) 20%,transparent 20%);background-size:15% 15%,20% 20%,18% 18%,20% 20%,15% 15%,10% 10%,20% 20%}#whisper{position:fixed;bottom:42px;right:65px;min-width:200px;min-height:40px;max-width:500px;margin-left:50px;z-index:10;border-radius:15px;background:var(--theme-color);background:-webkit-gradient(linear,left top,right top,from(var(--theme-color)),to(var(--theme-color2)));background:-webkit-linear-gradient(left,var(--theme-color),var(--theme-color2));background:linear-gradient(90deg,var(--theme-color),var(--theme-color2));-webkit-box-shadow:0 15px 20px rgba(31,45,61,.2);box-shadow:0 15px 20px rgba(31,45,61,.2);-webkit-transform-origin:calc(100% + 10px) calc(100% - 18px);transform-origin:calc(100% + 10px) calc(100% - 18px)}#whisper .shuo_time{position:absolute;color:#fff;font-size:12px;left:0;top:-22px;border-radius:10px;padding:0 10px;background:var(--theme-color2)}#whisper .shuo_more{position:absolute!important;left:-45px;top:0;width:40px}#whisper .shuo_more a{display:block;color:#fff!important;text-align:center;line-height:40px;font-size:20px;width:40px;height:40px;border-radius:50%;background:var(--theme-color)}#whisper .shuo_time:after{content:"";position:absolute;right:-15px;top:4px;height:10px;width:10px;border-radius:50%;background:var(--theme-color)}#whisper .whisper_details{color:#fff}#chatTemplate{color:#fff;max-height:400px;overflow:auto;-webkit-overflow-scrolling:touch;padding:8px 15px}#whisper.unavailable{visibility:hidden;-webkit-transform:scale(0);transform:scale(0);opacity:0}#whisper:after{content:"";position:absolute;right:-8px;bottom:5px;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:12px solid var(--theme-color2)}#whisper .shuo_more .circle{width:100%;height:100%;position:absolute;z-index:-1;border-radius:50%;opacity:0;background:var(--theme-color);animation:circle-opacity 2s infinite}@keyframes circle-opacity{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(2)}}@media screen and (max-width:991.98px){.single-title-zone h1{font-size:22px;line-height:30px}.footer-tools .tools-btn{display:block}}@media screen and (max-width:575.98px){.container .single-thumbnail-card .card-img-overlay{padding:0 20px 20px}.single-title-zone h1{margin-top:5px;margin-bottom:10px;letter-spacing:0}.single-title-zone .category{font-size:16px}.single-thumbnail{height:300px}.entry-content{word-wrap:break-word}}.wechat{position:relative}.wechatimg{position:absolute;z-index:999;visibility:hidden;width:121px;height:121px;padding:10px;background:#383a3f;border-radius:var(--theme-border-radius);-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0);opacity:0}.wechatimg.menu{top:30px;left:-45px}.wechatimg img{max-width:100%;height:auto;vertical-align:middle;border-radius:var(--theme-border-radius-md)}.wechatimg:before{content:"";position:absolute;display:block;border-style:solid}.wechatimg.menu:before{border-width:0 10px 10px;border-color:transparent transparent #383a3f;top:-10px;margin-left:-10px;left:50%}@media (max-width:767.98px){#whisper{bottom:38px;right:55px}}.post-social{position:absolute;height:100%;opacity:1;margin-left:-60px;left:0;width:40px}.post-social li{position:relative;text-align:center;display:block;font-size:1.25rem}.post-social li a{display:block;line-height:40px}@media (min-width:768px) and (max-width:991.98px){.post-social{margin-left:-45px}}.btn.weibo{color:#e24040!important}.btn-primary{background-color:var(--theme-color)!important;border-color:var(--theme-color)!important;box-shadow:0px 5px 20px -3px var(--shadow-color)!important}.theiaStickySidebar .count{position:absolute;left:24px;top:5px;padding:0 5px;height:16px;border-radius:8px;background-color:var(--theme-color);font-size:12px;line-height:16px;text-align:center;color:#fff;font-weight:600}.py-1 .btn-light{background-color:#fff;border:unset}.w-40{width:40px!important;height:40px!important}.small-menu{position:absolute;height:100%;opacity:1;margin-right:-230px;margin-top:0;right:0;width:200px}.small-menu .small-menu-body{display:none;border:none;font-size:14px;line-height:18px;text-align:left}.small-menu #small-menu-ul{list-style:none;margin-left:1px;padding:8px 0 16px;border-left:1px solid rgba(202,209,219,.404);position:relative}.small-menu .small-title{font-size:16px;margin-left:-7.5px}.small-menu .small-title>i{margin-right:14px}#small-menu-ul:after{content:"";position:absolute;width:9px;height:9px;background:#838383;left:-5px;bottom:0;border-radius:50%}.text-xs{font-size:.75rem!important}.text-sm{font-size:.875rem!important}@media (max-width:767.98px){.text-sm{font-size:.825rem!important}}@media screen and (max-width:575.98px){.container{width:100%}}.card-img-overlay{border-radius:12px}.btn-light{background-color:#fff;border-color:#fff}.ioc-dark-mode pre{background-color:#383e43;color:#bcbcbc}.ioc-dark-mode .text-muted{color:#888!important}.ioc-dark-mode .btn-light{color:#bcbcbc;background-color:#454545;border-color:#454545}.ioc-dark-mode .logo-light{display:none}.ioc-dark-mode .logo-dark{display:inherit}.ioc-dark-mode .main-navigation ul li ul{background:#383a3f;box-shadow:none}.ioc-dark-mode #emojis_link{background-color:#383a3f}.wow{visibility:hidden}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}:root{--swiper-theme-color:#007aff}:root{--swiper-navigation-size:44px}.container.custom-width{max-width:950px}
如何在网站右侧添加浮动的客服代码 - 赢聚网 最近无意中在云瑞网的服务页面看到了右侧悬浮的企鹅小图像,点击后可以直接通过“QQ 在线”功能与客服进行“QQ 在线”弹窗交流!博主大概看了下底层代码,发现很好实现,于是就尝试在自己的网站:https://blog.yephy.com/ 上面实现了。下面,就把实现的方法告诉大家:
首先,在你网站的body
代码中(通常可以加入在foot.php
文件中)加入如下代码:
<style>.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;top:80%;right:40px;opacity:0;-webkit-box-shadow:0 5px 10px 0 rgba(35,50,56,0.3);box-shadow:0 5px 10px 0 rgba(35,50,56,0.3);z-index:700;transform:translateY(0);-webkit-transform:translateY(0);-ms-transform:translateY(0);cursor:pointer;-webkit-transition:all 1s cubic-bezier(0.86,0,0.07,1);transition:all 1s cubic-bezier(0.86,0,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,#38dc79,#1ab744);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;border-radius:100%}.livechat-girl .animated-circles .circle{background:rgba(26,183,68,0.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:2000ms scaleToggleOne cubic-bezier(0.25,0.46,0.45,0.94) forwards}.livechat-girl .animated-circles.animated .c-2{animation:2500ms scaleToggleTwo cubic-bezier(0.25,0.46,0.45,0.94) forwards}.livechat-girl .animated-circles.animated .c-3{animation:3000ms scaleToggleThree cubic-bezier(0.25,0.46,0.45,0.94) forwards}.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-transition:all 0.3s cubic-bezier(0.86,0,0.07,1);transition:all 0.3s cubic-bezier(0.86,0,0.07,1);background-color:#1ab744}.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)}.rd-notice-tooltip{-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.2);box-shadow:0 2px 2px rgba(0,0,0,0.2);font-size:14px;border-radius:3px;line-height:1.25;position:absolute;z-index:65;max-width:350px}.rd-notice-tooltip.thumb-heart-tooltip{z-index:100;margin-top:19px}.rd-notice-tooltip.thumb-heart-tooltip .rd-notice-content{padding:10px 20px}.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;top:10px;right:-6px;background-color:#1ab744}.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-tooltip .rd-notice-content a{color:#fff;text-decoration:underline}.rd-notice-tooltip .arrow{display:none !important}.rd-notice-tooltip.alert.rd-closing{white-space:normal;text-align:left}.rd-notice-tooltip.alert.rd-closing .rd-notice-content{padding-right:50px}.rd-notice-tooltip.single-line .rd-notice-content{height:40px;padding:0 20px;line-height:40px;white-space:nowrap}@keyframes scaleToggleOne{from{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)}}</style>
<a class="livechat-girl js-livechat-girl animated" id="lc-girl-block-en_2" href="http://wpa.qq.com/msgrd?v=3&uin=252112645&site=qq&menu=yes" target="_blank"><img class="girl" border="0" src="http://cdn.yephy.com/image/kfh.png" alt="点击这里给我发消息" title="点击这里给我发消息">
<div class="js-livechat-hint livechat-hint rd-notice rd-notice-tooltip single-line hide_hint">
<div class="popover-content rd-notice-content">嘿!有什么能帮到您的吗?</div>
</div>
<div class="animated-circles js-animated-circles animated">
<div class="circle c-1"></div>
<div class="circle c-2"></div>
<div class="circle c-3"></div>
</div>
</a>
<script type='text/javascript' src='http://cdn.yephy.com/js/jquery-3.2.1.min.js?ver=3.2.1'></script>
<script>
jQuery(function(){
setInterval(function(){
jQuery('.js-animated-circles').toggleClass('animated');
},4000);
jQuery('#lc-girl-block-en_2').on({'mouseover':function(){
jQuery(this).find('.js-livechat-hint').removeClass('hide_hint').addClass('show_hint');
},
'mouseleave':function(){
jQuery(this).find('.js-livechat-hint').removeClass('show_hint').addClass('hide_hint');
}
})
});
</script>
上面的代码中,需要留意一些地方:
1、个人 QQ 号码的替换:
代码第二行中,将http://wpa.qq.com/msgrd?v=3&uin=252112645&site=qq&menu=yes
这个链接中的252112645
替换为你的 QQ 号码,同时你要到这里开通“QQ 在线”功能;
2、图片和 JS 文件保存及个人路径替换
代码第二行中的图片链接http://cdn.yephy.com/image/kfh.png
这个是我自己 CDN 服务器的图片,因为做了防盗链设置,所以如果童鞋们直接复制代码的话,将会无法显示,因此大家可以直接将这个图片保存上传到自己的网站目录或者 CDN 服务器,然后将链接替换就可以了;
同理,代码第十二行中的 JS 文件地址,大家也可以用同样的办法将 JS 文件保存上传到自己的网站目录或者 CDN 服务器,然后替换对应的链接!
至此,我们的代码添加就完全结束了,将代码后,清理缓存并刷新页面,怎么样,看到可爱的小企鹅了么?

这时候,我们还要解决一个问题,就是想要这个代码,不出现在平版设备或者手机设备的页面上,要解决这个问题,只需要在代码中第一行 CSS 代码的部分,首尾分别加入“@media(min-width:880px) {”和“}”就可以了,加过之后的代码如下(这里只显示第一行代码):(之前代码错误,导致在手机和平板上还会显示,只是样式发生了改变,并且出现在页面的底部,这里改正下)只需要在第一行代码的style
标签后面加入下面一段代码即可:
@media(max-width:880px){.livechat-girl{display:none}}
重新保存后,到移动设备上,刷新一下我们的网页,是不是看不到小企鹅了?再也不用担心它会遮挡屏幕了!^_^
上一篇
没有更多了...
下一篇LNMP 环境部署 SSL 证书,开启 https 访问