在本站在右下角有一个动态的客户,点击弹出QQ聊天,看看效果
要实现的就是这个美女效果!
第一步:新建文件保存为kefu.js
jQuery(function($) { //indexkefu var _girls = { en: ['en_1', 'en_2', 'en_3', 'en_4'], de: ['de_1', 'de_2', 'de_3', 'de_4'], es: ['es_1', 'es_2', 'es_3', 'es_4'], ru: ['ru_1', 'ru_2', 'ru_3', 'ru_4'], fr: ['fr_1', 'fr_2', 'fr_3', 'fr_4'], it: ['it_1', 'it_2', 'it_3', 'it_4'], pl: ['pl_1', 'pl_2', 'pl_3', 'pl_4'], tr: ['tr_1', 'tr_2', 'tr_3', 'tr_4'], zh: ['cn_1', 'cn_2', 'cn_3', 'cn_4', 'cn_5'], pt: ['br_1', 'br_2', 'br_3', 'br_4', 'br_5'] }; var config = { lc_goToEnChat: '.js-go-to-en-chat', container: '.js-livechat-girl', girlImageHolder: '.js-girl-holder', girlImage: '.girl', girlImageHover: 'girl_hover', livechatBoard: '.js-live-chat-board', livechatBoardClose: '.js-lc-board-close', livechatGirlHint: '.js-livechat-hint', randomGirlName: '' }; function getRandomGirl() { var a = 'wp-content/themes/dux/img/kefu/', b = 'zh', c = 'en'; b in _girls && (c = b); b = _girls[c]; c = Math.floor(Math.random() * b.length); config.randomGirlName = b[c]; return '/' + a + b[c] + '.png' }; $(config.container).removeClass('js-none').delay(500).queue(function() { $(config.container).addClass('animated').dequeue() }.bind(this)); var a = getRandomGirl(), b = $('', { 'class': 'girl js-girl-image', 'src': a }); $(config.container).find(config.girlImageHolder).prepend(b); $(config.container).attr("id", "lc-girl-block-" + config.randomGirlName); startAnimation(); $(config.container).on('mouseover', '.girl', function() { showHintMessage() }.bind(this)).on('mouseout', '.girl', function() { hideHintMessage() }.bind(this)); function changeImageOnHover() { var a = $(config.container).find(config.girlImage), b = $(a).clone().addClass('girl_smiling'), c = config.girlImageHover; b.attr('src', function(a, b) { return b.replace('chat-presales', 'chat-presales/smile') }); $(this.config.container).find(this.config.girlImageHolder).prepend(b); a.on('mouseover', a, function() { a.hasClass(c) || $(a).addClass(c) }.bind(this)).on('mouseleave', a, function() { a.hasClass(c) && $(a).removeClass(c) }.bind(this)) }; function startAnimation() { function a() { b.toggleClass('animated'); return setInterval(function() { b.toggleClass('animated') }, 5E3) } var b = $('.js-animated-circles'); setTimeout(function() { showHintMessage(); setTimeout(function() { hideHintMessage(); this.animaTimer0 = setTimeout(function() { this.animaTimer = a() }.bind(this), 1E4) }.bind(this), 5E3) }.bind(this), 1E3); }; function showHintMessage() { var a = $(config.livechatGirlHint); this.hintHideTimer && clearTimeout(this.hintHideTimer); a.show(); this.hintShowTimer = setTimeout(function() { a.removeClass('hide_hint').addClass('show_hint') }, 100) }; function hideHintMessage() { var a = $(config.livechatGirlHint); this.hintShowTimer && clearTimeout(this.hintShowTimer); this.hintHideTimer = setTimeout(function() { a.addClass('hide_hint').delay(250).queue(function() { a.removeClass('show_hint').hide().dequeue() }.bind(this)) }, 100) }; //indexkefu end });
第二步,新建kefu.css
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .Global_ScrollToTop { z-index: 8999; position: fixed; width: 35px; height: 35px; right: 0; bottom: 25%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyppVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5QTAzQUE3OTk1RjAxMUU2ODMwN0VCRTFBQzZERTNDMiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5QTAzQUE3QTk1RjAxMUU2ODMwN0VCRTFBQzZERTNDMiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjlBMDNBQTc3OTVGMDExRTY4MzA3RUJFMUFDNkRFM0MyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjlBMDNBQTc4OTVGMDExRTY4MzA3RUJFMUFDNkRFM0MyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jIc+KAAAApxJREFUeNrs2r9rGmEYB3BPPT2jNPVcAlkCEcGfEYSgoAZCpuBg/o9s3VwEcfEH4q8kuuiWSScnyZBBBHcnQwgiWIVmMdFqWq/2fUMrJw2lLZgS/T6L3uP7nu99vPd5X+SY/f39jxLELyEFAWAAAxjAAAYwgAEMYAADGARgAAMYwAAGMIABDGAAAxgEYAADGMCsHczOzo68UCjo6CtgfoRer5fncjmd2WxWXFxc6HZ3d+VrD2Mymdjz83OdVqt9HgvP81KKYzQa2bWF2dvbYzOZDL+5ubkwDnqczWZ5m83Grh2Mw+FQJJNJnUajeXEMNE8/p+3WBsblcikTiQS/sbHBiPP39/eC+FitVjO0ndPpVKw8zMHBgTIajWo5jltAqVar45OTk09XV1djcZ62i8VivMfjUb7mOGXb29sfXuvLjo6OuHA4rGVZdgGlUql8DoVCA0EQJNfX15OtrS2ZwWCY1xeZTMYcHh5ynU5nend3N10pmOPjY1UwGNTK5fIFlFKpNIpEIg+z2Wyeq9VqT3SVIivWfApJpVKG3G2qXq8n3N7eTlcCxu/3qwKBwHvyyy/kLy8vh6SGPL7Up16vP5ECzFitVjGOxOv1crQWtVqt6ZuG8fl8zyj0osRBdrmPZ2dnw9/1bTQaX8i0k9jt9nl9YRhG4na7uX6/L9zc3CwNZ+nF9/T09B29mJ9BpwzZ5T7k8/nhn/Qnm70hafsgztHz0fOuzKpEUdLp9KBYLI7+ph+5u0apVGogrkPi929yKnW73SnZpCknk8ksHo8PyuXy+F/O02w2v9LaYrFYFKPR6BtZ8gftdltY1rgZPBmO/2MAAxjAAAYwgAEMYAADGARgAAMYwAAGMIABDGAAAxgEYAADGMAA5j/HdwEGAIIVzqt17KAnAAAAAElFTkSuQmCC'); background-size: contain; background-repeat: no-repeat; cursor: pointer; } @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) } } .rd-notice { opacity: 0; position: relative; padding: 0; border: 0; text-align: left; background-color: #546e7a; -webkit-box-shadow: 0 5px 10px 0 rgba(36,50,56,0.2); box-shadow: 0 5px 10px 0 rgba(36,50,56,0.2) } .rd-notice .rd-notice-content { background-color: #546e7a } .rd-notice:after { background-color: #546e7a; -webkit-box-shadow: 0 5px 10px 0 rgba(36,50,56,0.2); box-shadow: 0 5px 10px 0 rgba(36,50,56,0.2) } .rd-notice:not(.rd-notice-position-static) .rd-notice-content,.rd-notice:not(.rd-notice-position-static) .rd-notice-type-icon,.rd-notice:not(.rd-notice-position-static) .rd-close-icon::before,.rd-notice:not(.rd-notice-position-static) .close::before { color: #fff!important } .rd-notice .rd-close-icon,.rd-notice .close { background: 0; position: absolute; z-index: 100; width: 10px; height: 10px; right: 20px; top: 20px; font-size: 0; text-align: center; opacity: 1!important; font-weight: normal; text-shadow: none } .rd-notice .rd-close-icon:before,.rd-notice .close:before { content: "\e911"; font-family: 'tm-icomoon'; font-size: 10px; color: #fff } .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; opacity: 1 } .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.limited-width { max-width: 350px } .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-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 } .rd-notice.animate { opacity: 1; margin-top: 0 } .rd-notice-position-corner { margin-bottom: 20px; margin-right: 20px; max-width: 350px; padding: 20px 50px 20px 20px; border-radius: 3px } .rd-notice-position-corner.animate { margin-top: 0!important; opacity: .9 } .rd-notice-position-corner .rd-notice-type-icon { font-size: 20px; margin-right: 20px; display: table } .rd-notice-position-corner .rd-close-icon,.rd-notice-position-corner .close { top: 15px; right: 20px } .rd-notice-position-fullWidth { width: 100%; height: 60px; margin-top: -60px } .rd-notice-position-fullWidth .rd-notice-type-icon { margin-right: 10px; font-size: 24px } .rd-notice-position-fullWidth .rd-notice-content { white-space: nowrap } .rd-notice-position-fullWidth .rd-close-icon,.rd-notice-position-fullWidth .close { top: calc(50% - 10px); right: 40px } .rd-notice-position-static { width: 100%; opacity: 1; margin-top: 0; transform: scale(1); padding: 20px 40px 20px; z-index: 1 } .rd-notice-position-static .rd-notice-content { padding-left: 20px } .rd-notice-position-static .tm-icon { font-size: 40px; color: #ff8f00 } .rd-notice-position-static .rd-close-icon,.rd-notice-position-static .close { display: none } .rd-notice-position-left { margin-left: -20px } .rd-notice-position-left:after { right: -6px; top: 50%; margin-top: -10px } .rd-notice-position-right { margin-left: 20px } .rd-notice-position-right:after { left: -6px; top: 50%; margin-top: -10px } .rd-notice-position-top { margin-top: -20px; margin-bottom: 20px } .rd-notice-position-top:after { bottom: -6px; left: 50%; margin-left: -10px } .rd-notice-position-bottom { margin-top: 20px; margin-bottom: -20px } .rd-notice-position-bottom:after { top: -6px; left: 50%; margin-left: -10px } .rd-notice-type-default { background-color: #546e7a; -webkit-box-shadow: 0 5px 10px 0 rgba(36,50,56,0.2); box-shadow: 0 5px 10px 0 rgba(36,50,56,0.2) } .rd-notice-type-default .rd-notice-content { background-color: #546e7a } .rd-notice-type-default:after { background-color: #546e7a; -webkit-box-shadow: 0 5px 10px 0 rgba(36,50,56,0.2); box-shadow: 0 5px 10px 0 rgba(36,50,56,0.2) } .rd-notice-type-error { background-color: #d84315; -webkit-box-shadow: 0 5px 10px 0 rgba(191,54,12,0.2); box-shadow: 0 5px 10px 0 rgba(191,54,12,0.2) } .rd-notice-type-error .rd-notice-content { background-color: #d84315 } .rd-notice-type-error:after { background-color: #d84315; -webkit-box-shadow: 0 5px 10px 0 rgba(191,54,12,0.2); box-shadow: 0 5px 10px 0 rgba(191,54,12,0.2) } .rd-notice-type-success { background-color: #1ab744; -webkit-box-shadow: 0 5px 10px 0 rgba(0,96,35,0.2); box-shadow: 0 5px 10px 0 rgba(0,96,35,0.2) } .rd-notice-type-success .rd-notice-content { background-color: #1ab744 } .rd-notice-type-success:after { background-color: #1ab744; -webkit-box-shadow: 0 5px 10px 0 rgba(0,96,35,0.2); box-shadow: 0 5px 10px 0 rgba(0,96,35,0.2) } .rd-notice-type-warning { background-color: #ff8f00; -webkit-box-shadow: 0 5px 10px 0 rgba(255,111,0,0.2); box-shadow: 0 5px 10px 0 rgba(255,111,0,0.2) } .rd-notice-type-warning .rd-notice-content { background-color: #ff8f00 } .rd-notice-type-warning:after { background-color: #ff8f00; -webkit-box-shadow: 0 5px 10px 0 rgba(255,111,0,0.2); box-shadow: 0 5px 10px 0 rgba(255,111,0,0.2) } .rd-notice-type-alert { background-color: #fff8e1 } .rd-notice-type-alert .rd-notice-content { background-color: #fff8e1 } .rd-notice .rd-close-icon,.rd-notice .close { position: absolute; cursor: pointer } .rd-notice .rd-close-icon::before,.rd-notice .close::before { content: ""; display: inline-block; font-family: "tm-icomoon"; font-size: 10px; font-weight: normal; margin-left: 1px; margin-top: 1px; transform: rotate(-2deg) } .item-details .social-share a i, article .social-share li a i, article .social-share li a span { pointer-events: none; } .js-none { display: none!important; } .livechat-girl { position: fixed; bottom: 0; right: 80px; opacity: 0; 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 .livechat-control { border-radius: 50px 50px; background-color: rgba(255,255,255,0.85); box-shadow: 0 5px 10px 0 rgba(35,50,56,0.3); font-size: 0; margin: 0; padding: 0; } .livechat-girl .livechat-control__element { cursor: pointer; height: 100%; vertical-align: top } .livechat-girl .livechat-control__element:hover .tm-icon { transform: scale(1.25) } .livechat-girl .livechat-control__element_clicked .livechat-control__link .tm-icon { transform: scale(1) } .livechat-girl .livechat-control__element_clicked .livechat-control__link .tm-icon.icon-speech-dots { background-color: #06742e } .livechat-girl .livechat-control__element_clicked .livechat-control__link .tm-icon.icon-handset2 { background-color: #0d47a1 } .livechat-girl .livechat-control__element .tm-icon { padding: 0; margin-top: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; outline: 0; color: #fff; font-size: 20px; text-align: center; -webkit-transition: all 300ms cubic-bezier(0.86,0,0.07,1); transition: all 300ms cubic-bezier(0.86,0,0.07,1) } .livechat-girl .livechat-control__element .tm-icon:before { line-height: 40px } .livechat-girl .livechat-control__element_chat { display: inline-block; line-height: normal; } .livechat-girl .livechat-control__element_chat:hover .tm-icon { background-color: #1b9b4a } .livechat-girl .livechat-control__element_chat:after { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-image: linear-gradient(to bottom,#38dc79,#1ab744); position: absolute; left: 46px; top: 1px; z-index: 50 } .livechat-girl .livechat-control__element_chat .tm-icon { display: none; margin-left: 20px; background-color: #1ab744 } .livechat-girl .livechat-control__element_callback { display: none } .livechat-girl .livechat-control__element_callback .tm-icon { display: inline-block; margin-right: 20px; margin-bottom: 10px; background-color: #2196f3 } .livechat-girl .livechat-control__link { display: inline-block } .livechat-girl .livechat-control .girl-holder { position: relative; display: inline-block; width: 60px; height: 60px; vertical-align: top; z-index: 50 } .livechat-girl .livechat-control .girl { position: relative; width: 60px; height: 60px; border-radius: 50% } .livechat-girl .livechat-control .girl_smiling { position: absolute } .livechat-girl .livechat-control .girl_hover { opacity: 0 } .livechat-girl .animated-circles { position: absolute; top: 0 } .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 .3s cubic-bezier(0.86,0,0.07,1); transition: all .3s cubic-bezier(0.86,0,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 } .livechat-girl.with-callback .girl { border: solid 1px #cfd8dc } .livechat-girl.with-callback .livechat-hint { right: 180px } .livechat-girl.with-callback .livechat-control__element_chat a { padding-right: 10px } .livechat-girl.with-callback .livechat-control__element_chat .tm-icon { display: inline-block } .livechat-girl.with-callback .livechat-control__element_callback { display: inline-block } .livechat-girl.with-callback .livechat-control__element_callback a { padding-left: 10px } @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 } } .live-chat-board { width: 480px; border-radius: 3px; background: #fff; box-shadow: 0 10px 20px 0 rgba(35,50,56,0.3); position: fixed; right: 20px; bottom: 120px; z-index: 700; -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-transition-timing-function: cubic-bezier(0.86,0,0.07,1); transition-timing-function: cubic-bezier(0.86,0,0.07,1); opacity: 0; display: none } .live-chat-board.rotated { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight } .live-chat-board.rotatedBack { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight } .live-chat-board .lc-board-header { background: #243238; padding: 0; height: 40px; text-align: center; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0 } .live-chat-board .lc-board-header>div { font-size: 16px; line-height: 24px; display: inline-block; vertical-align: middle; line-height: 40px; height: 40px } .live-chat-board .lc-board-header>div.lc-board-close { position: absolute; left: 20px; height: 27px; width: 12px; color: #fff; cursor: pointer; z-index: 51 } .live-chat-board .lc-board-header>div.lc-board-close .tm-icon { width: 20px; font-size: 20px; position: relative; top: 2px; display: inline-block; left: -6px; -webkit-transform: rotate(90deg); transform: rotate(90deg) } .live-chat-board .lc-board-header>div.lc-board-lang-selector { width: 110px; color: #fff; position: absolute; right: 0; padding: 0; -webkit-transition: background 500ms cubic-bezier(0.86,0,0.07,1); transition: background 500ms cubic-bezier(0.86,0,0.07,1); -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0 } .live-chat-board .lc-board-header>div.lc-board-lang-selector .rd-form { cursor: pointer } .live-chat-board .lc-board-header>div.lc-board-lang-selector select { color: #fff!important } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-container { padding: 0; z-index: 51; vertical-align: top; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0 } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-container.chosen-container-active,.live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-container:hover { background: -webkit-linear-gradient(top,#78909c 0,#546e7a 100%); background: linear-gradient(to bottom,#78909c 0,#546e7a 100%) } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-container.chosen-container-active:not(.chosen-with-drop) .chosen-single { background: -webkit-linear-gradient(top,#1e5799 0,#78909c 0,#546e7a 100%)!important; background: linear-gradient(to bottom,#1e5799 0,#78909c 0,#546e7a 100%)!important } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-container .chosen-single:active { background: -webkit-linear-gradient(top,#1e5799 0,#455a64 0,#546e7a 100%)!important; background: linear-gradient(to bottom,#1e5799 0,#455a64 0,#546e7a 100%)!important } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-container .chosen-single:active>span { padding-top: 2px } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-container .chosen-single:active .iti-flag { top: 6px } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-container .chosen-single:active>div { margin-top: -4px } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-container.chosen-container-single.chosen-with-drop.chosen-container-active .chosen-drop { left: 0; height: auto } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-container.chosen-container-single.chosen-with-drop.chosen-container-active .chosen-single>div { margin-top: 0 } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-container .chosen-single { background: none!important; padding: 0 20px!important; width: 100%; height: 40px!important; display: block; margin: 0!important } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-container .chosen-single .iti-flag { left: 10px; top: 5px } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-container .chosen-single>span { padding: 1px 0 0 0; letter-spacing: 1.4px; text-transform: uppercase; color: #fff; font-size: 14px; line-height: 40px; margin-left: 10px; width: auto } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-container .chosen-single>div { color: #fff; right: 20px; -webkit-transition: none; transition: none; font-size: 13px } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-drop { position: absolute; background: #546e7a; left: 0; top: 100%; width: 100%; z-index: 55 } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-drop .chosen-search { display: none!important } .live-chat-board .lc-board-header>div.lc-board-lang-selector .chosen-drop .chosen-results li { text-align: left; color: #fff } .live-chat-board .lc-board-header>div.lc-board-lang-selector.single-list .rd-form { pointer-events: none } .live-chat-board .lc-board-header>div.lc-board-lang-selector.single-list .chosen-container { z-index: 0 } .live-chat-board .lc-board-header>div.lc-board-lang-selector.single-list .chosen-container .chosen-single { pointer-events: none } .live-chat-board .lc-board-header>div.lc-board-lang-selector.single-list .chosen-container .chosen-single>div { display: none } .live-chat-board .lc-board-header .lc-board-caption { color: #fff } .live-chat-board .lc-board-header .lc-board-caption .tm-icon { width: 20px; font-size: 20px; margin-right: 10px; position: relative; top: 2px } .live-chat-board .lc-board-type-selector { display: flex; width: 480px; overflow: hidden; box-shadow: inset 0 -8px 5px 0 rgba(38,49,56,0.1); background: #dde3e6; clear: both; position: relative } .live-chat-board .lc-board-type-selector:before,.live-chat-board .lc-board-type-selector:after { position: absolute; content: ''; display: block; width: 10px; height: calc(88%); background: #dde3e6; z-index: 5; top: 0; left: 0 } .live-chat-board .lc-board-type-selector:after { right: 0; left: auto } .live-chat-board .lc-board-type-selector .lc-board-type { background: rgba(0,0,0,0); padding: 20px; float: left; width: 33.333%; cursor: pointer } .live-chat-board .lc-board-type-selector .lc-board-type:after { position: absolute; content: ''; display: none; background-repeat: no-repeat; width: 3px; height: 3px; bottom: 6px; right: -3px } .live-chat-board .lc-board-type-selector .lc-board-type:before { position: absolute; content: ''; display: none; background-repeat: no-repeat; width: 3px; height: 3px; bottom: 6px; right: -3px } .live-chat-board .lc-board-type-selector .lc-board-type:first-child { border-right: 1px solid #cfd8dc } .live-chat-board .lc-board-type-selector .lc-board-type:last-child { border-left: 1px solid #cfd8dc } .live-chat-board .lc-board-type-selector .lc-board-type.active { background: #fff; position: relative; z-index: 50 } .live-chat-board .lc-board-type-selector .lc-board-type.active h4 { color: #243238 } .live-chat-board .lc-board-type-selector .lc-board-type.active h4:after { background: -moz-linear-gradient(left,rgba(255,255,255,0) 0,#fff 57%); background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0,#fff 57%); background: linear-gradient(to right,rgba(255,255,255,0) 0,#fff 57%) } .live-chat-board .lc-board-type-selector .lc-board-type.active:after { display: block } .live-chat-board .lc-board-type-selector .lc-board-type.active:first-child { border-right: 0; box-shadow: 2px 2px 5px 0 rgba(38,49,56,0.1) } .live-chat-board .lc-board-type-selector .lc-board-type.active:last-child { box-shadow: -4px 2px 5px 0 rgba(38,49,56,0.1) } .live-chat-board .lc-board-type-selector .lc-board-type.active:last-child:after { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); left: -3px; right: auto } .live-chat-board .lc-board-type-selector .lc-board-type.active:nth-child(2) { box-shadow: 0 2px 10px 0 rgba(38,49,56,0.15) } .live-chat-board .lc-board-type-selector .lc-board-type.active:nth-child(2):before { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); left: -3px; right: auto; display: block } .live-chat-board .lc-board-type-selector .lc-board-type:not(.active):hover { background: #cfd8dc; position: relative; z-index: 49 } .live-chat-board .lc-board-type-selector .lc-board-type:not(.active):hover h4:after { background: -moz-linear-gradient(left,rgba(207,216,220,0) 0,#cfd8dc 57%); background: -webkit-linear-gradient(left,rgba(207,216,220,0) 0,#cfd8dc 57%); background: linear-gradient(to right,rgba(207,216,220,0) 0,#cfd8dc 57%) } .live-chat-board .lc-board-type-selector .lc-board-type h4 { color: #2196f3; margin: 0 0 10px 0; padding: 0; white-space: nowrap; position: relative; overflow: hidden } .live-chat-board .lc-board-type-selector .lc-board-type h4:after { display: block; position: absolute; z-index: 50; width: 25px; height: 100%; top: 0; right: 0; content: ''; background: -moz-linear-gradient(left,rgba(221,227,230,0) 0,#dde3e6 57%); background: -webkit-linear-gradient(left,rgba(221,227,230,0) 0,#dde3e6 57%); background: linear-gradient(to right,rgba(221,227,230,0) 0,#dde3e6 57%) } .live-chat-board .lc-board-type-selector .lc-board-type p { color: #243238; padding: 0; margin: 0 0 6px 0 } .live-chat-board .lc-board-content-wrapper { padding: 40px; position: relative; margin-top: -6px; z-index: 50; background: #fff; -webkit-border-radius: 3px; border-radius: 3px } .live-chat-board .lc-board-content-wrapper .lc-board-content-item { display: -webkit-flex; display: flex; visibility: hidden; height: 0; align-items: center } .live-chat-board .lc-board-content-wrapper .lc-board-content-item.active { visibility: visible; min-height: 220px } .live-chat-board .lc-board-content-wrapper .lc-board-content-item .rd-form { -webkit-flex-grow: 1; flex-grow: 1 } .live-chat-board .lc-board-content-wrapper .rd-form .wrap-select-field { max-width: 440px } .live-chat-board .busy-operators-message { width: 340px; opacity: 0; -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transition: all .5s cubic-bezier(0.68,-0.55,0.265,1.55); transition: all .5s cubic-bezier(0.68,-0.55,0.265,1.55); margin-top: -60px; right: 0; display: none } .live-chat-board .busy-operators-message .inner { position: relative } .live-chat-board .busy-operators-message.show-in-bottom { -webkit-transform: scale(0.8) translateY(20%); transform: scale(0.8) translateY(20%) } .live-chat-board .busy-operators-message.show-in-top { -webkit-transform: scale(0.8) translateY(-97%); transform: scale(0.8) translateY(-97%) } .live-chat-board .busy-operators-message.shown { opacity: 1; -webkit-transform: scale(1) translateY(-101%); transform: scale(1) translateY(-101%) } .live-chat-board .busy-operators-message.shown.show-in-bottom { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); margin-top: 20px } .live-chat-board .busy-operators-message:after { right: 12%; left: auto } .live-chat-board .busy-operators-message .go-to-en-chat,.live-chat-board .busy-operators-message .link-click { font-weight: bold; color: #64b5f6; cursor: pointer } .live-chat-board .busy-operators-message .go-to-en-chat:hover,.live-chat-board .busy-operators-message .link-click:hover { color: #2196f3 } .live-chat-board .lc-board-body { display: -webkit-flex; display: flex; white-space: nowrap } .live-chat-board .lc-board-body .lc-board-type { white-space: normal } .live-chat-board .lc-board-body .tab-pane { -webkit-flex: 1 1 auto; flex: 1 1 auto; display: inline-block } .live-chat-board .lc-board-body .tab-pane:after { position: absolute; content: ''; display: block; bottom: -7px; right: 40px; width: 20px; height: 20px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 15; background: #fff } .live-chat-board .lc-board-body .tab-pane.call-back-tab { white-space: nowrap; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .live-chat-board .lc-board-body .tab-pane:not(.active) { -webkit-transform: translateX(1000%); transform: translateX(1000%); visibility: hidden } .live-chat-board .lc-board-body .tab-pane:not(.active) .lc-board-call-back { display: none } .live-chat-board .lc-board-call-back { display: inline-block; padding: 20px 40px 0; position: relative; width: 480px; vertical-align: top; white-space: normal; -webkit-transition: all .3s cubic-bezier(0.86,0,0.07,1); transition: all .3s cubic-bezier(0.86,0,0.07,1) } .live-chat-board .lc-board-call-back-success { opacity: 0; text-align: center; -webkit-transform: scale(0.8); transform: scale(0.8) } .live-chat-board .lc-board-call-back-success .icon-success { font-size: 80px; color: #1ab744 } .live-chat-board .lc-board-call-back-success .success-title { font-size: 30px; color: #1ab744 } .live-chat-board .lc-board-call-back-success .success-description { margin-top: 20px } .live-chat-board .lc-board-call-back-success .flip-clock-wrapper { text-align: center; margin: 20px 0 0 0 } .live-chat-board .lc-board-call-back-success .flip-clock-wrapper .flip-wrapper:nth-child(1),.live-chat-board .lc-board-call-back-success .flip-clock-wrapper .flip-wrapper:nth-child(2) { display: none } .live-chat-board .lc-board-call-back-success .flip-clock-wrapper .up:after { top: 29px; background-color: #fff } .live-chat-board .lc-board-call-back-content { text-align: center; margin-bottom: 40px; padding-top: 20px } .live-chat-board .lc-board-call-back-description { margin-top: 20px } .live-chat-board .animation { position: relative } .live-chat-board .animation .lc-board-call-back-form { opacity: 0; -webkit-transform: scale(0.8) translateX(-100%); transform: scale(0.8) translateX(-100%) } .live-chat-board .animation .lc-board-call-back-success { opacity: 1; -webkit-transform: scale(1) translateX(-100%); transform: scale(1) translateX(-100%) } .live-chat-board .rd-form .chosen-phone .tm-rd-input .chosen-container { display: flex; flex-direction: column-reverse; top: 40px } .live-chat-board .rd-form .chosen-phone .tm-rd-input .chosen-container .chosen-single { height: 40px!important; margin-top: -40px } .live-chat-board .rd-form .chosen-phone .tm-rd-input .chosen-container .chosen-single .iti-flag { top: 5px } .live-chat-board .rd-form .chosen-phone .tm-rd-input .chosen-container .chosen-drop { top: -330px; display: flex; flex-direction: column-reverse; box-shadow: none; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0 } .live-chat-board .rd-form .chosen-phone .tm-rd-input .chosen-container .chosen-drop .chosen-results { max-height: 212px } .live-chat-board .rd-form .chosen-phone .tm-rd-input .chosen-container .chosen-drop .chosen-results li { width: auto!important } .live-chat-board .rd-form .chosen-phone .tm-rd-input .chosen-container .chosen-drop .chosen-results li:first-child { border-top: 0 } .live-chat-board.with-callback .lc-board-body .tab-pane.live-chat-tab:after { right: 110px } .live-chat-board.with-callback .lc-board-body .tab-pane.call-back-tab:after { left: 410px } @media only screen and (max-width: 767px) { .livechat-girl { display: none; } }
第三步:打开主题的function.php,添加如下代码:
function showkefu(){ echo '<link href="'.get_bloginfo('template_directory').'/css/kefu.css" rel="stylesheet" type="text/css" /> <div class="islazy livechat-girl js-livechat-girl js-none"> <ul class="islazy livechat-control"> <li class="islazy livechat-control__element livechat-control__element_chat"> <a rel=“external nofollow” href="http://wpa.qq.com/msgrd?v=3&uin=603981&site=qq&menu=yes" class="islazy livechat-control__link js-start-chat" target="_blank"> <div class="islazy js-girl-holder girl-holder"></div> </a> </li> </ul> <div class="islazy js-livechat-hint livechat-hint rd-notice rd-notice-tooltip rd-notice-type-success rd-notice-position-left single-line"> <div class="islazy popover-content rd-notice-content js-invitation-greeting">嘿,我来帮您!</div> </div> <div class="islazy animated-circles js-animated-circles"> <div class="islazy circle c-1"></div> <div class="islazy circle c-2"></div> <div class="islazy circle c-3"></div> </div> </div> <script src="'.get_bloginfo('template_directory').'/js/kefu.js" type="text/javascript"></script>'; } add_action( 'wp_footer', 'showkefu', 20 );
把kefu.js放在主题的js目录中,把kefu.css放在主题的css目录中,同时修改上面的QQ号为自己的客服QQ
别忘了把以下图片保存到主题的img/kefu目录中
未经允许不得转载:百脑问 » 为wordpress网站加上QQ客户动画效果
评论前必须登录!