WordPress子比主题美化-给首页左侧添加联系站长按钮

功能介绍

联系站长图标的作用主要是为用户提供一种便捷的方式，以与网站的管理员或站长取得联系。这个图标一般放置在网站的显眼位置，用户点击后，可以跳转到站长的联系方式页面，或者通过弹出的对话框直接联系站长。这样的设计有助于提升用户与站长之间的沟通效率，进而提升网站的用户体验和服务质量。

代码:

<style> @keyframes shangxa {
            0%, 100%, 20%, 50%, 80% {
                transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
                transform: translate3d(0, 0, 0);
            }
            40%, 43% {
                transition-timing-function: cubic-bezier(0.755, 0.50, 0.855, 0.060);
                transform: translate3d(0, -10px, 0);
            }
            70% {
                transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
                transform: translate3d(0, -6px, 0);
            }
            90% {
                transform: translate3d(0, -3px, 0);
            }
        }

.leke {
    display: flex;
    position: fixed;
    left: 0;
    top: calc(50% - 103px);
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 6px -4px, rgba(13, 206, 158, .37) 0px 6px 10px;
    z-index: 10;
    overflow: hidden;
    background: #0dce9e;
    padding: 12px 8px 12px 5px;
    border-radius: 0 14px 14px 0;
    transition: height 0.2s ease 0s, top 0.2s ease 0s;
}

.leke:hover {
    opacity: .8;
}

.leke .upload-icon {
    flex-shrink: 0;
    width: 28px;
    height: auto;
    display: block;
    margin-bottom: 2px;
    -webkit-animation: shangxa 2s infinite;
    animation: shangxa 2s infinite;
}

@media screen
AND (max-width: 768px) {
    .leke {
        display: none;
    }
}

#qidiana {
    cursor: pointer;
}

.class_qidian_wpa {
    border-radius: 6px !important;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
} </style> <a href="https://qm.qq.com/q/VNY7IibtCe" target="_blank">
    <div id="qidiana" class="leke">
        <svg t="1599210542874" class="upload-icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="16321" width="30" height="30">
            <path d="M224.99 512a287.01 287.01 0 1 0 574.02 0 287.01 287.01 0 1 0-574.02 0z" fill="#FFDA33"
                  p-id="16322"></path>
            <path d="M659.18375 635.7275c5.61375-6.55875 3.74625-16.86375-2.82375-22.5-6.5475-5.61375-16.86375-3.735-22.48875 2.82375-33.75 37.485-70.30125 55.305-121.86 55.305-51.55875 0-84.375-14.0625-121.87125-55.305-5.625-6.57-15.94125-8.4375-22.5-2.82375-6.57 5.63625-8.4375 15.94125-2.8125 22.5 44.055 49.69125 85.30875 68.43375 147.18375 68.43375 61.86375 0 107.7975-22.48875 147.1725-68.43375zM390.15125 469.8125v-56.25c0-14.99625-12.18375-28.125-28.125-28.125-14.99625 0-28.11375 12.18375-28.11375 28.125v56.25c0 14.99625 12.1725 28.125 28.11375 28.125 14.99625 0 28.125-12.18375 28.125-28.125z m494.94375-59.0625c-42.1875-170.6175-193.10625-297.1575-373.08375-297.1575-179.98875 0-330.9075 126.54-373.10625 297.1575-45 16.875-76.87125 66.555-76.87125 124.68375 0 66.56625 42.1875 121.86 97.4925 130.30875 0 0 0 0.93375 0.945 0.93375h62.80875a339.87375 339.87375 0 0 1-39.375-159.3675c0-186.5475 147.18375-337.4775 328.10625-337.4775s328.08375 150.93 328.08375 337.4775c0 125.60625-66.54375 234.36-165.915 292.48875A54.9 54.9 0 0 0 661.0625 797.91875c-30.9375 0-56.25 25.30125-56.25 56.2275 0 30.94875 25.3125 56.26125 56.25 56.26125 30.92625 0 56.23875-25.3125 56.23875-56.26125 0-4.68-0.93375-9.36-1.87875-13.10625 64.6875-42.1875 117.18-103.12875 148.12875-175.2975 55.29375-9.39375 98.415-63.7425 98.415-130.30875 0-58.12875-32.81625-107.80875-76.87125-124.68375z m-194.985 59.0625v-56.25c0-14.99625-12.18375-28.125-28.11375-28.125-15.0075 0-28.125 12.18375-28.125 28.125v56.25c0 14.99625 12.18375 28.125 28.125 28.125 14.99625 0 28.11375-12.18375 28.11375-28.125z"
                  fill="#515151" p-id="16323" data-spm-anchor-id="a313x.7781069.0.i0" class=""></path>
        </svg>
        <span>联</span><span>系</span><span>站</span><span>长</span></div>
</a>