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

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

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

相关阅读

相关养幼猫经验

环境环境一定要温暖，不要让幼猫受冻晚上注意要驱蚊窝一定要定期清理喂养条件要买贵一点的幼猫专用的猫粮要买猫湿粮、猫罐头、猫

Bertha 。/ 2024年03月22日 11:11/ 0 赞/ 16 阅读

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

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

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

相关猫公子xiu

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

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

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

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

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

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

CSS maomao { position: fixed; bottom: 40p

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

相关短信猫 Java

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

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

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

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

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

相关猫狗队列题目

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

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

相关作文以别猫

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

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

相关猫狗数据集

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

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