在您的博客,网站上增加一个躲猫猫功能,当鼠标移动上面就会躲起来,鼠标移走就会出现时不时的眨一下眼,支持电脑和移动端网站。
首先在要添加躲猫猫功能的页面加上这个代码
<div id="maomao" onmouseout="duoMaomao()" style="bottom: 50vh;z-index:1000"></div>
下面的CSS可以添加到全局,图片外链替换成自己的。
#maomao {
position: fixed;
bottom: 40px;
right: -5px;
width: 57px;
height: 70px;
background-image: url('https://cdn.zxki.cn/tc/2023/11/21/0cab3fe8f3d75.svg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: background .3s;
}
#maomao:hover {
background-position: 60px 50%;
}
JS也可以添加到全局,然后返回网站F5刷新网页就可以看到侧栏的小猫了。
请登录后发表评论
注册
请登录后查看评论内容