在网站右侧底部添加一个可爱的小猫叫声代码

原创于 2022-07-04 19:35:57 发布 · 1.3w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #servlet

程序代码专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在网页底部右侧添加一只互动小猫的方法，通过简单的HTML、CSS及JavaScript代码实现，当鼠标移开时小猫会消失，且页面加载时会自动播放猫咪叫声。

站右侧底部添加一个可爱的小猫，访问还会有喵叫声哦~不仅如此，点击小喵可自动消失
在任意页面都可以添加一下代码。

<!--躲猫猫-->
<div id="maomao" onmouseout="duoMaomao()">
    <input type="button" onclick="autoPlay()" hidden="true">
</div>

<!--自动一声猫咪叫-->
<audio id="myaudio" src="//lib.hackeus.cn/static/audio/music_miao.mp3" acontrols="controls" autoplay="autoplay" hidden="true"></audio>

CSS代码：

/*躲猫猫*/
#maomao {
    position: fixed;
    bottom: 40px;
    right: -5px;
    width: 57px;
    height: 70px;
    background-image: url(//lib.hackeus.cn/static/svg/mao.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: background .3s;
}

#maomao:hover {
    background-position: 60px 50%;
}

来源于：https://blog.hackeus.cn/content/12/