TypechoJoeTheme

小霆教程网-小霆博客bolg

网站logo添加鼠标经过效果

2021-01-29
/
1 评论
/
2,110 阅读
/
正在检测是否收录...
01/29

灵感来自小米官网的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;
        }

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

朗读
赞 · 4
版权属于:

小霆教程网-小霆博客bolg

本文链接:

https://xiaoting6.cn/index.php/archives/291/(转载时请注明本文出处及文章链接)

评论 (1)
  1. 站元素主机 作者
    Windows 10 · FireFox

    赞一个

    2021-02-06 回复

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. 北京艺术培训
    2021-06-30
  2. 共享博客
    2021-02-20
  3. 站元素主机
    2021-02-06
  4. QQ情感站
    2020-06-29
  5. 你的老弟
    2020-05-09