代码实现特色圆形 logo

今天七墨看到一个网站的 logo 特别有特色，鼠标未移动到 logo 上时是一种样式，移动到 logo 上又是另一种样式，其实实现方法也很简单，教程来啦。

• 1.添加功能代码：

将以下代码放到 footer.php 的 </body> 上面即可：

<div class="logo">
        <a href="https://qimok.cn/"></a>
</div>

注意：修改上面的网址为你自己的即可。

• 2.添加样式代码：

将以下代码放到 style.css 中即可：

.logo {
    background: #8F8180 url("https://cdn.qimok.cn/wp-content/uploads/2017/05/logo.png") no-repeat scroll center center;
    border-radius: 50%;
    box-shadow: 0 2px 2px #414141;
    height: 145px;
    left: 390px;
    position: absolute;
    top: 12px;
    width: 145px;
}
.logo:hover {
    background: #8F8180 url("http://www.iplaypy.cn/content/templates/Black/images/home.png") no-repeat scroll center center;
}
.logo a {
    display: block;
    height: 100%;
    width: 100%;
}

注意：上面的图片链接均换成你自己的，另外，建议将上面的背景颜色代码 #8F8180 均换成 #000，这样背景是黑色的，显得霸气一点。