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

红太狼 2022-09-03 15:25 139阅读 0赞

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" onMouseOut="duoMaomao()"></div>

素材

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

效果：

![a175669731fc0f2458e755711051a4b4.png][]

[a175669731fc0f2458e755711051a4b4.png]: /images/20220829/c7acf69901e64615a8f7103e100f82a5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，139人围观）

还没有评论，来说两句吧...

相关阅读

相关【gcd性质】猫猫与数学

[E-猫猫与数学\_牛客小白月赛71(重现赛) (nowcoder.com)][E-_71_ _nowcoder.com] 题意： ![16f764afa4244227af

叁歲伎倆/ 2024年03月22日 09:05/ 0 赞/ 76 阅读

相关 20190612 叠猫猫赚金币最新脚本

1、使用chrome浏览器、或者360极速浏览器，360极速模式等； 2、打开 [https://login.m.taobao.com/login.htm][https_lo

雨点打透心脏的1/2处/ 2024年01月20日 08:12/ 0 赞/ 24 阅读

相关猫脸变换

Arnold这个名字由来是一个叫做Arnold的前辈提出的一种变换，最初是用一只猫图片进行了该变换，所以也叫猫脸变换，这种映射可以把图像的各像素点位置进行置换，也就是说通过

骑猪看日落/ 2023年06月04日 06:52/ 0 赞/ 18 阅读

相关章鱼猫（Octocat）

为什么Github的Logo是一只章鱼猫呢？ ![1395907-20190821225634319-785516448.png][] Reference： [章鱼

短命女/ 2023年06月01日 06:18/ 0 赞/ 9 阅读

相关为网站页面添加live2D小猫猫

live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发，通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。 live2d官方提供

Bertha 。/ 2023年02月12日 05:49/ 0 赞/ 11 阅读

相关猫公子xiu

姓名：休休，年龄一岁半（2019-02-28出生），美短虎斑猫，性格温和、乖巧，玩的时候也很调皮，不怕生，吃得多（好吃鬼、母老虎），以下是我精美的照片，喜欢的记得点赞哦。

柔光的暖阳◎/ 2022年11月26日 07:59/ 0 赞/ 174 阅读

相关什么品种的猫最受欢迎？Python爬取猫咪网站交易数据

本篇文章是关于某化妆品企业的销售分析。从分析思路开始带大家一步步地用python进行分析，找出问题，并提出解决方案的整个流程。以下文章来源于修炼Python 作者：叶庭云

迷南。/ 2022年10月28日 14:26/ 0 赞/ 294 阅读

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

CSS maomao { position: fixed; bottom: 40p

红太狼/ 2022年09月03日 15:25/ 0 赞/ 140 阅读

相关短信猫 Java

短信发送  <bean id="SMSServiceTask" class="com.comname.smp.co

落日映苍穹つ/ 2022年08月04日 13:50/ 0 赞/ 272 阅读

相关天猫，京东各大网站锚点的跳转

// 点击导航 <div class="left\_bar" style=""> <a class="bar\_one" href="\s\_1"> <span cla

快来打我*/ 2022年06月17日 12:51/ 0 赞/ 268 阅读