给你的网站添加一个躲猫猫吧

给你的网站添加一个躲猫猫吧

023661

效果展示

图片[1]-给你的网站添加一个躲猫猫吧-小语雀网

代码示例

CSS代码

#maomao {
	position:fixed;
	bottom:40px;
	right:-5px;
	width:57px;
	height:70px;
	background-image:url(https://siitake.cn/src/mao.svg);
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	transition:background .3s;
}
#maomao:hover {
	background-position:60px 50%;
}
@media screen and (max-width:1199px) {
	.main {
	margin-left:200px;
}
.l-item {
	width:calc(25% - 40px);
}
}@media screen and (max-width:991px) {
	.main {
	margin-left:150px;
}
.l-item {
	width:calc(33.33% - 40px);
}
}@media screen and (max-width:767px) {
	.main {
	margin-left:100px;
}
.l-item {
	width:calc(50% - 40px);
}
}@media screen and (max-width:512px) {
	.main {
	margin-left:50px;
}
.l-item {
	width:calc(100% - 40px);
}
}

HTML代码

<div id="maomao" onmouseout="duoMaomao()"></div>

JavaScript代码

var duoMaomao = function () {
    var maomao = $('#maomao');
    maomao.css('bottom', randomNum(5, 80) + 'vh');
}

© 版权声明
THE END
文章不错?点个赞呗
点赞61赞赏
分享
评论 抢沙发
小语雀的头像-小语雀网

昵称

取消
昵称表情代码图片