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

红太狼 2022-09-03 15:25 131阅读 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 条评论，131人围观）

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

相关阅读

相关章鱼猫挂件

为你的网站挂上章鱼猫颜色 fill:151513、64CEAA、FD6C6C、70B7FD(自定义); 右上角 <a href="https:

谁践踏了优雅/ 2024年04月06日 12:51/ 0 赞/ 50 阅读

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

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

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

相关猫公子xiu

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

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

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

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

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

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

CSS maomao { position: fixed; bottom: 40p

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

相关短信猫 Java

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

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

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

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

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

相关猫狗队列题目

源码下载链接:[https://github.com/huijuanl/AlgorithmLearning.git][https_github.com_huijuanl_Alg

桃扇骨/ 2022年05月22日 11:45/ 0 赞/ 253 阅读

相关作文以别猫

猫祭吾家曾有小猫咪，身着黑白显虎威，怎奈娇弱小身躯，常在人前妙哀呼。想是灵物落人间，柔声律足善歌舞。不求扑鼠尺寸功，唯爱弄花与戏蝶。

爱被打了一巴掌/ 2022年05月20日 02:11/ 0 赞/ 148 阅读

相关猫狗数据集

import numpy as np import pickle import cv2 import pandas as pd import tensorflow as

怼烎@/ 2021年11月24日 02:10/ 0 赞/ 493 阅读