给你的网站加一个可爱的”躲猫猫“

本文主要是介绍给你的网站加一个可爱的”躲猫猫“，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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');
        }

HTML

<div id="maomao" onm ouseOut="duoMaomao()"></div>

素材

https://cdn.jsdelivr.net/gh/muzihuaner/huancdn/img/20210808215127.svg

效果：

这篇关于给你的网站加一个可爱的”躲猫猫“的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！