小霆教程网-小霆博客bolg小霆教程网-小霆博客bolg

喜迎春节
,小霆教你学网络
春秋冬夏
,季季博客发教程

网站logo添加鼠标经过效果

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

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

logo.png

效果展示:

源代码如下

        .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;
        }

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

QQ截图20210129155050.png

本原创文章未经允许不得转载 | 当前页面:小霆教程网-小霆博客bolg » 网站logo添加鼠标经过效果

评论