灵感来自小米官网的logo效果

需要提前把自己的logo制作好

效果展示：

源代码如下

        .logo a {
            /* 将a标签转换为行内块元素 */
            display: inline-block;
            /* 设置适合你网站logo的宽高 */
            width: 150px;
            height: 31px;
            /* 给a标签添加背景图片 注意网站后台的logo就不需要设置了 */
            background: url("logo.png") no-repeat;
            /* 让图片宽度缩放为a标签的宽度 */
            background-size: 100%;
            /* 最后给a标签添加一个过渡即可 */
            transition: all .2s;
        }

        .logo a:hover {
            /* 鼠标经过让背景图像上移动31像素 */
            background-position: 0 -31px;
        }

注意类名的修改 要与自己网站的对应，需要技术支持 可以点击小霆博客主页联系站长按钮