CSS兔小巢右下角客服反馈浮窗代码-QQ沐编程

代码介绍

CSS兔小巢右下角反馈浮窗代码是一款基于div+css实现的仿腾讯兔小巢右下角意见反馈按钮图标代码，可以用来做自己的网站客服联系功能，需要的朋友可以拿去使用

效果预览

图片[1]-CSS兔小巢右下角客服反馈浮窗代码-QQ沐编程

代码如下

<!DOCTYPE html>
<html lang="en">
<!--QQ沐编程 www.qqmu.com 学习QQ群：290987565  域名抢注 33210.jm.cn -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS兔小巢右下角反馈浮窗代码 - QQ沐编程</title>
    <style>
        body {
            /* height: 100%; */
            height: calc(100vh);
        }

        .yuntucao-link {
            position: fixed;
            bottom: 40px;
            right: 20px;
            z-index: 9999;
        }

        .logo-wrap {
            cursor: pointer;

            opacity: .9;
            padding: 15px 10px 10px;
            border-radius: 20px;
            background: linear-gradient(-180deg, #dadfea, #ebedf5);
        }

        .logo {
            width: 32px;
            height: 28px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAcCAYAAAAAwr0iAAAABGdBTUEAALGPC/xhBQAAAqxJREFUSA21Vs9r1EAUfi/Z7bog1FU8KdWLv26ia1W0rApCD0qhdhdE8CdtL9WbBwX/gB48eShdqeJ1rb21KipbpSC9FARBoVIpiheVqkUQu+b5JWtKEjPJbNqdQ2bmvW++92XeZF6Y/rVypXoewwFi3iMi7NpXu2fiT8Q0njGz18517//qBCpXnt8SsgZWO1g0H3/IptJ58/bo5Gm88WA0uCne1pplbTLEoitNodcgxfZ3GkSyTwMLCC/h8YqZRQ+PFcTv8FxQ4YVkvQE2UwXw2Zkv95eO7gbhTZ9dOeGZdVTYmTbNfJRo7IBeMwxr3EYy1fu4Vcz0uFTiPxdPdcyR0FsVXluAZfFBm0So3qsIPXYHf29segM+6m0eu2/Iw5WqZk55AYfmmbCchIqMj0UxwRl4gjy3wb1DAaGUyvG/XXJQ2oPg2g3Bj8eBtVMQR5TU38AOBEIw4Ro1hljkh9djMe0ikQteW9Q4sQDkd6SvWLgRRl6+Xz0mQlvCfEFb4hTgQCo/LdSyN8FAqnliASLGnIoU9vcRPp8ruQAylEFAqvT5omOSUAAv9RUPfQySuXMxInfHhTl9IgHI/zzud8vH5Jng5mv2DkQHWJthfQF4k28e8VpDicnxmRMddgn+HkeGgjVvp+BhHDDoxx3wO2jzzicmZjMomzWvLXzMY3yn8mJjja0Z/JZtDgeFWZ2fk5cI8ivMi3qxHXVza6hv2civs625AzhPRMOVqTYIHsLWdmJhooO5zBs74C/4qXpgtqSvXuo6vOgIcNfcrVbXLH2mKQjZ69pwRhZRgs/mLHrq2lbSF4tHfoITIerNJ8A2lSuT0yij7Y6bedYwuau3u6B9tdZp9Z8R282PWlLS3szgtszQaojPY7C3p3A96rLRf8cGkSOj1XyDS1YE/wsT+LIWtt/NgQAAAABJRU5ErkJggg==) no-repeat 0;
        }

        .logo-wrap:hover {
            background: #418dff;
        }

        .logo-wrap:hover .logo {
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAcCAYAAAAAwr0iAAAABGdBTUEAALGPC/xhBQAAAe1JREFUSA29ls8uA1EUxjsqYSOIsCGNjX8bkbDgITyAjfAA3oOFlQXxEHZNI9hJRCJWgoigwkr8j0TQjt9hppk77ZmZzmTmJF/vPd85Pefr3Om9N5dzzLbtBXAEqiBNu6f4Juhxe+dw1tLsqNS+he/L8zGHkpWamuwmnbTqtxBwwGQ6u75GpycR8AOVN+jGzjf0KRgHVuOUOvYSRta6uy7iEC2MUZpL+pJlWROMq+JEsGNyRsEUsLV8ERDVik6iO4Z9bxvBFXBF4rmW3IyAGaeIO2o1Xf4vjyWWJRhySf8o74D6eHzJz/h7YBa0+WKau0OgAEa0hGYEaDUS8c0sQaJG2pdbtUAE/pGcdfDmyx3DX/RxuivvQExTd0/q3UStmWQJ1L8WP/dM/8lmJIkA+X9rdq0F/HwSAUFNgmKGhrgC5Fy4MyqZTtDTMTLjCiizxVaNSqaT+hMIaxAWr8mVJ/BS86JPAhvwdGTbfo1QriwCShES/SlffsLrswfIWSH3jDDbkrOglyw5uwfCsj1xeQnlJvXp4bzTYZxBL9FgfgL3fxNDRAEUQQWkbQ802AAdIsq4WkG2w+2DSQk69s44D3ZdIuH4wTtiqzUQcQhcu2Aih0t2RkNXQIl5V3adnU6OgGXGuJtUMs00lltsZvYLUPxHqiXJxFUAAAAASUVORK5CYII=) no-repeat 0;
        }

        .yuntucao-link:hover .tips-wrap {
            display: block;
            background: #418dff;
        }

        .tips-wrap {
            position: relative;
            display: none;
        }

        .tips {
            width: 86px;
            height: 32px;
            background: #4e4e4e;
            border-radius: 4px;
            position: absolute;
            left: -98px;
            top: -44px;

            color:#fff;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
        }
        
        .tips:after {
            content: " ";
            display: block;
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-left: 6px solid #4e4e4e;
            position: absolute;
            right: -6px;
            top: 10px;
        }
    </style>
</head>

<body>

<div class="yuntucao-link">
	<a href="https://www.qqmu.com">
		<div class="logo-wrap">
			<div class="logo"></div>
		</div>
	</a>
	<div class="tips-wrap fade-in">
		<div class="tips"><span>意见反馈</span></div>
	</div>
</div>


</body>
</html>

本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！

THE END