给你的网站加一个可爱的”躲猫猫“
2021/8/8 23:39:07
本文主要是介绍给你的网站加一个可爱的”躲猫猫“,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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
效果:
这篇关于给你的网站加一个可爱的”躲猫猫“的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28微服务架构中API版本控制的实践
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南