网站加一个可爱的”躲猫猫”

HTML

<div id="maomao" onMouseOut="duoMaomao()"></div>

JS

var randomNum = function(minNum, maxNum) {            switch(arguments.length){                case 1:                    return parseInt(Math.random() * minNum + 1, 10);                    break;                case 2:                    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);                    break;                default:                    return 0;                    break;            }        }        var duoMaomao = function () {            var maomao = $('#maomao');            maomao.css('bottom', randomNum(5, 80) + 'vh');        }

CSS

#maomao {            position: fixed;            bottom: 40px;            right: -5px;            width: 57px;            height: 70px;            background-image: url(https://cdn.jsdelivr.net/gh/muzihuaner/huancdn/img/20210808215127.svg);            background-position: center;            background-size: cover;            background-repeat: no-repeat;            transition: background .3s;        }         #maomao:hover {            background-position: 60px 50%;        }

素材

https://blog.hwfans.cn/mao.svg

效果