• 本站首页
  • Java 开发
    • Spring Cloud
  • 数据库
  • 中间件
  • 算法
  • GitHub
  • 网站建设
    • wp 优化
    • 问题解决
  • 关于
wp 优化 / 网站建设

代码实现特色圆形 logo

言七墨 · 11月26日 · 2019年网站 logo 1227次已读

今天七墨看到一个网站的 logohttps://qimok.cn 特别有特色,鼠标未移动到 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,这样背景是黑色的,言七墨显得霸气一点。

4
相关文章

wordpress 设置以 .html 结尾的文章/页面

12月4日 · 2019年

刷新主题页面更换背景图片

11月29日 · 2019年

鼠标点击显示圆圈动画

11月28日 · 2019年

Icon 图标自动旋转教程

11月28日 · 2019年
0 条回应
取消 确定

取消回复

Copyright © 2017-2021 七墨博客 保留所有权利 · 网站统计
网站已运行:
冀公网安备13112602000145号 · 冀ICP备17012990号-2