Skip to content

H
HTML-CSS-JS

海拥✘ / HTML-CSS-JS
与 Fork 源项目一致

Fork自 inscode / HTML-CSS-JS

通知 1
Star 0
Fork 0
H
HTML-CSS-JS

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 78b78bba 编写于 作者: 6 628c8c471a7e4862742d8255
浏览文件
操作

Auto Commit

上级 ef53fd87
隐藏空白更改
内联 并排
Showing with 1476 addition and 18 deletion
index.html
浏览文件 @ 78b78bba
<!DOCTYPE html>
<html lang="en">
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css" />
<title>InsCode</title>
<meta charset="UTF-8">
<title>海拥作品合集-游戏、工具、动画、网站模板</title>
<link rel="shortcut icon" href="https://haiyong.site/img/favicon.png">
<meta name="description" content="前端案例作品合集展示页面（100+网页游戏、工具、动画、网站模版等）。" />
<meta name="keywords" content="前端,案例,作品,合集,展示,页面,网页,游戏,工具,动画,网站,模版" />
<link rel="stylesheet" href="./style.css">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?a9430a37066911650e26adadcc42798a";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=G-M4C8RG72ZJ"></script>
<script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-M4C8RG72ZJ');
</script>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({id:"JxVJPIpe3UAQqoDx",ck:"JxVJPIpe3UAQqoDx"})</script>
</head>
<body>
<div class="container">
<img src="src/assets/logo.svg" alt="InsCode">
<div>欢迎来到 InsCode</div>
<!-- partial:index.partial.html -->
<body><div class="musour">
<div class="musour-left">
<div class="musour-title">
<a href="https://haiyong.site" target="_blank"><div>HY</div>
资源库</div></a>
<h1>海拥百宝箱</h1>
<a href="https://code.haiyong.site" target="_blank"><div class="musour-title-2">获取源码</div></a>
<div class="musour-blurb">
由<b><a href="https://haiyong.site/moyu" target="_blank">游戏</a></b>、<b><a href="https://haiyong.site/tools" target="_blank">工具</a></b>、<b><a href="https://haiyong.site/demo" target="_blank">动画</a></b>和<b><a href="https://haiyong.site/moban" target="_blank">网站模板</a></b>组成。点击右边图标可<b>直接进入</b>.使用以下按钮<b>筛选</b>图标进行选择。
</div>
<div class="musour-filters filters">
<div class="button-group js-radio-button-group" data-filter-group="appearance">
<button class="button is-checked" data-filter="">展示所有</button>
<button class="button" data-filter=".game">游戏</button>
<button class="button" data-filter=".tools">工具</button>
<button class="button" data-filter=".demo">动画</button>
<button class="button" data-filter=".website">网站模版</button>
</div>
<script src="script.js"></script>
<!-- <h1>hair color</h1>
<div class="musour-color button-group js-radio-button-group" data-filter-group="haircolor">
<button class="button is-checked" data-filter=""></button>
<button class="button red" title="red" data-filter=".hred"></button>
<button class="button orange" title="orange" data-filter=".horange"></button>
<button class="button yellow" title="yellow" data-filter=".hyellow"></button>
<button class="button green" title="green" data-filter=".hgreen"></button>
<button class="button blue" title="blue" data-filter=".hblue"></button>
<button class="button purple" title="purple" data-filter=".hpurple"></button>
<button class="button pink" title="pink" data-filter=".hpink"></button>
<button class="button brown" title="brown" data-filter=".hbrown"></button>
<button class="button black" title="black" data-filter=".hblack"></button>
<button class="button gray" title="gray" data-filter=".hgray"></button>
<button class="button white" title="white" data-filter=".hwhite"></button>
</div>
<h1>eye color</h1>
<div class="musour-color button-group js-radio-button-group" data-filter-group="eyecolor">
<button class="button is-checked" data-filter=""></button>
<button class="button red" title="red" data-filter=".ered"></button>
<button class="button orange" title="orange" data-filter=".eorange"></button>
<button class="button yellow" title="yellow" data-filter=".eyellow"></button>
<button class="button green" title="green" data-filter=".egreen"></button>
<button class="button blue" title="blue" data-filter=".eblue"></button>
<button class="button purple" title="purple" data-filter=".epurple"></button>
<button class="button pink" title="pink" data-filter=".epink"></button>
<button class="button brown" title="brown" data-filter=".ebrown"></button>
<button class="button black" title="black" data-filter=".eblack"></button>
<button class="button gray" title="gray" data-filter=".egray"></button>
<button class="button white" title="white" data-filter=".ewhite"></button>
</div>
<h1>age</h1>
<div class="button-group js-radio-button-group" data-filter-group="age">
<button class="button is-checked" data-filter="">show all</button>
<button class="button" data-filter=".young">young</button>
<button class="button" data-filter=".adult">adult</button>
<button class="button" data-filter=".senior">senior</button>
<button class="button" data-filter=".child">child</button>
</div>
<h1>skin tone</h1>
<div class="button-group js-radio-button-group" data-filter-group="tone">
<button class="button is-checked" data-filter="">show all</button>
<button class="button" data-filter=".poc">person of color</button>
<button class="button" data-filter=".unnatural">unnatural</button>
</div>
<h1>hair style</h1>
<div class="button-group js-radio-button-group" data-filter-group="length">
<button class="button is-checked" data-filter="">show all</button>
<button class="button" data-filter=".long">long</button>
<button class="button" data-filter=".medium">medium</button>
<button class="button" data-filter=".short">short</button>
<button class="button" data-filter=".misc">miscellaneous</button>
</div>
<h1>style</h1>
<div class="button-group js-radio-button-group" data-filter-group="style">
<button class="button is-checked" data-filter="">show all</button>
<button class="button" data-filter=".modern">modern</button>
<button class="button" data-filter=".futuristic">futuristic</button>
<button class="button" data-filter=".fantasy">fantasy</button>
</div>
<h1>miscellaneous</h1>
<div class="button-group js-radio-button-group" data-filter-group="misc">
<button class="button is-checked" data-filter="">show all</button>
<button class="button" data-filter=".glasses">glasses</button>
<button class="button" data-filter=".kemonomimi">kemonomimi</button>
<button class="button" data-filter=".horned">horned</button>
<button class="button" data-filter=".monstrous">monstrous</button>
<button class="button" data-filter=".chromia">heterochromia</button>
<button class="button" data-filter=".multi">multi-colored hair</button>
<button class="button" data-filter=".updo">updo</button>
<button class="button" data-filter=".muscle">muscular</button>
<button class="button" data-filter=".pointed">pointed ears</button>
</div>
<h1>creator</h1>
<div class="button-group js-radio-button-group" data-filter-group="creator">
<button class="button is-checked" data-filter="">show all</button>
<button class="button" data-filter=".leap">leap</button>
<button class="button" data-filter=".melon">melon</button>
</div> -->
</div>
<div class="musour-right"><div class="grid">
<a href="https://haiyong.site/moyu/zhizhuzhipai.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/99676d2a29364d03aec02ef392e387a6.png">
<div><b>蜘蛛纸牌</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/xbw" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/d27ba7bc275a4b3588aa680d21d23853.png">
<div><b>小霸王游戏机</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/SpaceHuggers/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/b9accc6538e048688c6f28da31337587.png">
<div><b>第三人称射击游戏</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/100/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/ea739b73583e453a9062934a92c80395.png">
<div><b>是男人就下100层</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/towergame/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/04/20230412215827.png">
<div><b>盖楼游戏</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/kill-the-king.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/7c37d0fc89574ad38eb356d1a830c057.png">
<div><b>杀死国王</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/hjkg/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/0619a432cd6549d18038e1fdba575143.png">
<div><b>黄金矿工</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/spin-the-wheel.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/2342a0b42b814921a52e206858c3577c.png">
<div><b>自定义大转盘</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/pvz/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/pvz1-1.png">
<div><b>植物大战僵尸</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/mdtw/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/c7c3671996fb49c0974445c2f75d56ea.png">
<div><b>墓地逃亡</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/openurls" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/98e3c3d1b55f4c96b1d45fc98712a898.png">
<div><b>网址批量打开工具</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/wu.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/7a187bffed5a4430a90988e42045ff15.jpg">
<div><b>双人五子棋</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/wzq/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/c4f59fc4d9f647c79bc8221452d43b68.png">
<div><b>五子棋</b>
多种模式</div>
</div></a>
<a href="https://haiyong.site/moyu/wzq-2/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/06/20230611180623-700x446.png">
<div><b>五子棋</b>
简易版</div>
</div></a>
<a href="https://haiyong.site/moyu/wuziqi.html" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/06/20230616232029.png">
<div><b>五子棋</b>
与AI对弈</div>
</div></a>
<a href="https://haiyong.site/moyu/xiangqi/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/cb5727aac44b47aaa14ac96bbcc1cb7f.png">
<div><b>中国象棋</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/fjdz/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/06/20230611121607.png">
<div><b>飞机大战</b>
H5版</div>
</div></a>
<a href="https://haiyong.site/moyu/zhsl/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/15c63b54a26c47dbbb6dea7d03953e84.png">
<div><b>召唤神龙</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/shengchengshu.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/93283b0e62754a078a3ce78b42a3ecb5.png">
<div><b>自定义生成树</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/2048.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/099a9303476a468c8997b9d0163e8bcf.jpg">
<div><b>2048</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/weixiandehuoche/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/1c07bc48bd25442fbc20a99773bc2e49.png">
<div><b>危险货车</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/hddzz/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230404192448.png">
<div><b>海盗入侵</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/saiche/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/05209642c26d4e5abbb42da8f6440c0b.png">
<div><b>赛车</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/saolei-2.html" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/06/20230615195352-660x500.png">
<div><b>扫雷</b>
经典小游戏</div>
</div></a>
<a href="https://haiyong.site/moyu/jingziqi/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/06/20230611164004-521x500.png">
<div><b>井字棋</b>
XXOO</div>
</div></a>
<a href="https://haiyong.site/moyu/tkdz/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/06/20230611170503.png">
<div><b>坦克大战</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/xmfk" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/06/20230611172541.png">
<div><b>消灭方块</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/xxl/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/06/20230611182426.png">
<div><b>天天消消乐</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/jisupiaoyisaiche/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/05/20230531093418.png">
<div><b>极速漂移赛车</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/xygsz/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/05/20230530221645-700x486.png">
<div><b>下一个数字</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/xbnz/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/05/20230520193436-374x500.png">
<div><b></b>
《西部牛仔》</div>
</div></a>
<a href="https://haiyong.site/moyu/qmfjdz/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/05/20230520194958-299x500.png">
<div><b>全民飞机大战</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/flyingcheese/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/05/20230517210359-700x390.png">
<div><b></b>
《飞跃的奶酪》</div>
</div></a>
<a href="https://haiyong.site/moyu/taiqiu/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/05/20230515154538.png">
<div><b></b>
桌球游戏</div>
</div></a>
<a href="https://haiyong.site/moyu/hjk21/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/04/20230408180329.png">
<div><b>黑杰克</b>
21点</div>
</div></a>
<a href="https://haiyong.site/moyu/tjmj" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230405231412.png">
<div><b>天津麻将</b>
网页版</div>
</div></a>
<a href="https://haiyong.site/moyu/lianxingxing/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230329235155.png">
<div><b>《连星星》</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/fanyan/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230328000439.png">
<div><b>《繁衍战争》</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/jijia/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230327235832.png">
<div><b>机甲战士</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/starcraft/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/03/20230326195016.png">
<div><b>星际争霸</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/doudizhu/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2023/03/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20230325214634.png">
<div><b>单机斗地主</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/jiejiuhaidao/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2022/11/jiejiuhaidao2.png">
<div><b>解救海盗船长</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/xiadaoluobinhan/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2022/11/xiadaoluobinhan1.png">
<div><b>侠盗罗宾汉</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/luosimoying/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2022/11/luosimoying1.png">
<div><b>罗斯魔影</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/gaoda/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2022/11/gaoda1.png">
<div><b>高达战争</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/damaoxian/" target="_blank"><div class="musour-icon game">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/xiagu2-300x233.png">
<div><b>峡谷大冒险</b>
</div>
</div></a>
<a href="https://wanghao221.github.io/ji" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/d1c25c0f78e04bbea359035012850d9e.gif">
<div><b>🐓 只因你太美</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/mgdmx/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/823afbead8354232bbb4e5f92d12f442.png">
<div><b>萌怪大冒险</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/bwjqr/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/67b1338318a7406da1ecdaba1f888f6b.png">
<div><b>保卫机器人</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/tuzikuaipao/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/46b5f697d160459bb7273b4ddc0fe4cd.png">
<div><b>兔子快跑</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/hundouluo/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/2cdb9e70383443789a41460cedad1d04.png">
<div><b>魂斗罗</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/tingche/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/42464e95dc374a468dcec3251a5312c3.png">
<div><b>公园停车</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/msts/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/f8bfbbe24f8248fe8dc0e25bf67d9043.png">
<div><b>密室逃生</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/wzzc/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/aff2c646feb4417e92962eb09d88e649.png">
<div><b>亡者之城</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/tegong/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/3fbebf09865044c3a85bc9f9c8e885d7.png">
<div><b>特工卡尔施</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/magicegg/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/ef97e24b06424ac4a1d4d06e0540f77a.png">
<div><b>魔法蛋</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/feiyue/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/7b56e633d6a44f6d8eb6fb3d6cf5a32d.png">
<div><b>飞越天险</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/guangtouqiang/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/3925abbbf339421a9d8758c058f55704.png">
<div><b>疯狂光头强</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/taikong/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/1bd894cd47a2421782e2f82a86ab1a24.png">
<div><b>太空跑酷</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/flddsy/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/cbfec17bd5ac4e66b2e7c22843c3d724.png">
<div><b>弗莱迪的物理实验</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/qishi/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/2763773f71dd4afb953b5350549695b4.png">
<div><b>骑士冒险</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/senlin/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/e983543823634b7da0ce2799a33703ca.png">
<div><b>森林协奏曲</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/hlxz/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/f5c3cf3d669441bebaac0f52f76036ba.png">
<div><b>红蓝旋转</b>
</div>
</div></a>
<a href="https://haiyong.site/win" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/1a226f06010f4c4dbe4df65836872f35.png">
<div><b>win10</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/weijing/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/bf9ec7ffc9974c2fb468c580113afc93.png">
<div><b>维京战争</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/shuiguorenzhe/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/597e2faaf824460fb37994a599e62181.png">
<div><b>水果忍者</b>
</div>
</div></a>
<a href="https://wanghao221.github.io/buyudaren/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/b2df78e1762141389fbd44a4832c7295.png">
<div><b>捕鱼达人</b>
</div>
</div></a>
<a href="https://wanghao221.github.io/mario/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/c5ce0acb349143f7b401ef5bd85e5d5e.png">
<div><b>超级玛丽</b>
小霸王里可以玩原版</div>
</div></a>
<a href="https://haiyong.site/moyu/tiaofangzi.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/fa0b98baa7154ef1bc912aedd3292d51.png">
<div><b>跳房子</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/yigedoubunengsi/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/af70cebb4c5a4af1b6293e774a905db7.png">
<div><b>一个都不能死</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/shitoujiandaobu" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/2ccfd0097a76455c920f68e680b10bc3.png">
<div><b>石头剪刀布</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/guomalu.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/47b18439c18542baae9a1a993127a6ca.png">
<div><b>过马路小游戏</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/zhipaijiyi.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/be004f5899c9406cbd3b14ddc384bd4b.png">
<div><b>纸牌记忆游戏</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/doumao.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/f75cbc67588c4661a1b1e863309267df.png">
<div><b>逗猫</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/baohujidan.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/7a656cbbf7c247b59f5aaa37850838cb.jpg">
<div><b>保护鸡蛋</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/dadishu.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/e3b3fb36d7654dd4b643a8b3185bce20.png">
<div><b>打地鼠</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/laganziguoguan" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/f8d04fb984b34f00b59af60d7e840c0c.png">
<div><b>拉杆子过关</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/doudizhu.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/9a861478dbe04b56a7fdf2bb1902b9e5.png">
<div><b>斗地主</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/danzhu.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/05828e065f3a40f08152236d02e49fe9.jpg">
<div><b>弹珠打砖块游戏</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/feiji.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/d94d34cba32a4a3fb1d0797951f9a15c.jpg
">
<div><b>I-am-Airplane</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/feijizhadan.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/6024cad64b9a497895f02504cc7f135e.png">
<div><b>飞机炸弹💣</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/lion.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/1616779f7720439a962f069686bc8dd3.jpg">
<div><b>爱吹风的小狮子🦁</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/penhuolong.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/8ae0208946594e94b8aee8e07643e16c.jpg">
<div><b>打喷嚏的喷火龙</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/pokemon.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/68092fdabd91499ea176fa791643d3f3.jpg">
<div><b>宠物精灵对战</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/qiefangkuai.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/a8885f95db0e45f0ad672dddfce606c3.jpg">
<div><b>切方块小游戏</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/rengongzhizh.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230329142352.png">
<div><b>人工智障</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/baohuduixin.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230329142453.png">
<div><b>保护芯堆</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/eluosi.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230329142617.png">
<div><b>俄罗斯方块</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/huaxue.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230329142816.png">
<div><b>户外滑雪</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/tan.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/33c207ab723e42a39c75779566512b14.jpg">
<div><b>视觉差贪吃蛇</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/cesu.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/8c6b37cb4d484793b63aaeca4d8a1561.jpg">
<div><b>CPS测速</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/santa-claus.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/79b4513aa01a4269b3d1736b815606f9.png">
<div><b>圣诞老人过桥</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/sanzhiji.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/1193abf1eb5d4f61b1a51baae851bd7b.png">
<div><b>三只小鸡</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/tamagotchi/" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/3f8e3d12064e42398c1160ea62d09393.png">
<div><b>Tamagotchi养成小游戏</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/mofang" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/91ede294ef374843b5a4998caeb8ce6c.jpg">
<div><b>3D酷炫拼魔方</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/tower-blocks.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/63bdae23ad1d42e29041b54f831ed97e.png">
<div><b>盖塔楼</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/xiaofeiyu.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/2e12fffbd9ac4439ae3f8de01b87a72f.png">
<div><b>小飞鱼🐳</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/saolei.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/f34f5928fba34f2cad175aff7ddf8db7.jpg">
<div><b>扫雷</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/shejian.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/770d7cf8b2044625833b519c1aab5c98.png">
<div><b>射箭游戏</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/xiaoxiongchixingxing.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/b45105a36a314863bd53ea3ff5470c25.png">
<div><b>小熊吃星星（61关）</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/chazhen.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/b4a2dcaada944da0baec69d75ebe9b53.png">
<div><b>见缝插针</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/xxoo.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/b22b3aa214d14c5d9b32ae2e5a5d1272.png">
<div><b>AI井字棋</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/xxoo2.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/04634cc01a76428f8d11641dec726c24.png">
<div><b>双人井字棋bug版</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/xxoo3.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/54c1d25d8445400e81535d84d1028ccf.png">
<div><b>双人井字棋升级版</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/simplejsgame.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/568d25b12adf43a2bccf21d582e4f08c.png">
<div><b>闯关小游戏</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/wuxianpaoku.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/64a8bb40e22646e7a1f7698cd4ed6059.png">
<div><b>无限跑酷</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/paocaimigong.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/e0e087c8c4a54c6daa9165681cc7aa51.png">
<div><b>虫子走迷宫🐛</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/migong.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/58a5f6174a5640ce9f6eed4b87ac4733.png">
<div><b>撕衣服👗</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/migong.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/58a5f6174a5640ce9f6eed4b87ac4733.png">
<div><b>鼠标🖱走迷宫</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/quwei.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/9ad269458f2d44219d6a8fbc13c2fb5a.png">
<div><b>影子分身闯关</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/dou.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/1a52a87e739d40d69c9c8886b29278ca.png">
<div><b>吃豆人游戏</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/danban.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/9c289d02bae0484fb46f145cf5f68a2b.png">
<div><b>挡板小游戏</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/yingxiong.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/cb2ef62a4d1f45a98435169c6cce0589.png">
<div><b>是英雄就下一百层</b>
</div>
</div></a>
<a href="https://haiyong.site/lanqiao/16.html" target="_blank"><div class="musour-icon game">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/d83dea48f8114d47bddfead89fc12a72.png">
<div><b>骰子游戏</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/goupibutong.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/6afa08fb8a4d4758871657a9da5fef90.png">
<div><b>文章生成器</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/qianming" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/e58d954a956142e0aa662ec1c859730f.png">
<div><b>签名生成器</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/image-zoom.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230328235938.png">
<div><b>图像放大器</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/zifu.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230328221924.png">
<div><b>字符计数器</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/form.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326005933.png">
<div><b>拖拽生成器✨</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/daxiaoxie.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/1a495a53335044eb91b771f9396f4e3e.png">
<div><b>大小写转换器</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/daimasumiao.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/3f9a093886234740ae617364dbb2d4fc.png">
<div><b>代码素描</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/yane.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/b4523c78ccc448c0afc8e7aacdadfacb.png">
<div><b>配色器</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/random-password-generator.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/9c365a3584b244068ca5acc2681cdf20.png">
<div><b>随机密码生成器</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/mima.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326005723.png">
<div><b>密码生成器</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/pdf.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/bizhi/220723.png">
<div><b>PDF生成器</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/yan.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326005046.png">
<div><b>颜色标记生成器</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/color-generator.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230328222124.png">
<div><b>随机颜色生成器</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/age-calculator.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326010158.png">
<div><b>年龄计算器</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/wenben.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/bizhi/20230328235142.png">
<div><b>文本转换为文件</b>
</div>
</div></a>
<a href="https://haiyong.site/win" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/1a226f06010f4c4dbe4df65836872f35.png">
<div><b>win10</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/yinyue" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/c61b08b9849d4c3ebefd3d52dc5d00a5.png">
<div><b>音乐播放器</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/chengyujielong" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/204bbeded3b74f22ad91b265b03eabcd.png">
<div><b>最长的成语接龙</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/dice.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/b5428ba79b604e3a94283f54a98ed052.png">
<div><b>自定义骰子</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/jsq1.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/97244dc0d1714450bdecbcf856b9c9a4.png">
<div><b>计算器1.0</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/jsq2.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/817033ee6d1d46bf978031153c3972be.png">
<div><b>计算器2.0</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/jsq3.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/aca744bbdf61419b9c50782c57d2fe92.png">
<div><b>计算器3.0</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/jsq4.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/b70a1dc1d86e47aca41c5ee3bf865fea.png">
<div><b>计算器4.0</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/todolist.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/15ae3051bc3a482480e8d49bc9365de6.png">
<div><b>待办事项清单</b>
</div>
</div></a>
<a href="https://haiyong.site/tools/weather.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/94dae70f1cfa440285f076a0aa4725f4.png">
<div><b>天气实况</b>
</div>
</div></a>
<a href="https://haiyong.site/moyu/cizhi.html" target="_blank"><div class="musour-icon tools">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326004937.png">
<div><b>辞职信</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/wave.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230329000840.png">
<div><b>水波文本动画</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/jishuqi.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230328221637.png">
<div><b>计数器</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/hacker/" target="_blank"><div class="musour-icon demo">
<img src="https://code.haiyong.site/wp-content/uploads/2022/11/hacker.png">
<div><b>黑客入侵</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/aixin/" target="_blank"><div class="musour-icon demo">
<img src="https://code.haiyong.site/wp-content/uploads/2022/11/aixin.png">
<div><b>爱心特效</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/yinghua.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/9d3630a9fb004ef4aee5a8c5faee4bc0.png">
<div><b>樱花</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/xiaxue" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/c522bb55cc4040a2bed8b86dbe8dd2de.png">
<div><b>下雪</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/shengdanheka.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326011814.png">
<div><b>贺卡</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/daynight.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326014042.png">
<div><b>日夜切换</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/clock1.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326013752.png">
<div><b>白色简约时钟</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/clock2.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230327103430.png">
<div><b>黑色炫酷时钟</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/clock3.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230327103540.png">
<div><b>八卦时钟</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/clock4.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230328234420.png">
<div><b>简单模拟时钟</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/kaiguan.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230327103702.png">
<div><b>仿真按钮</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/qicaiyu.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230327103913.png">
<div><b>七色的雨💧</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/eluvletter" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230327104122.png">
<div><b>自定义浪漫信封</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/chuanyueshikong.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326013153.png">
<div><b>哆啦A梦的时光机</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/github.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230328234729.png">
<div><b>GitHub 登录页面</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/fireworks1.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326012222.png">
<div><b>烟花特效1</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/fireworks2.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326012253.png">
<div><b>烟花特效2</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/fireworks3.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326012323.png">
<div><b>烟花特效3</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/fireworks4.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326012354.png">
<div><b>烟花特效4</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/fireworks5.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326012426.png">
<div><b>烟花特效5</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/christmastree1.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326012926.png">
<div><b>圣诞树1</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/christmastree2.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326012902.png">
<div><b>圣诞树2</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/christmastree3.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326012751.png">
<div><b>圣诞树3</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/christmastree4.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326012727.png">
<div><b>圣诞树4</b>
</div>
</div></a>
<a href="https://haiyong.site/demo/christmastree5.html" target="_blank"><div class="musour-icon demo">
<img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326012704.png">
<div><b>圣诞树5</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/1" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220924204840-300x147.png">
<div><b>灰色房产中介公司网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/2" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/moban2-300x218.gif">
<div><b>橘黄色html5科技公司网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/3" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/moban3-300x141.png">
<div><b>电子商务大型html5模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/4" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/moban4-300x155.gif">
<div><b>怀旧服魔兽世界游戏类主题页面模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/5" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221015214833-300x141.png">
<div><b>个人简历网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/6" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221015214852-300x140.png">
<div><b>个人简历网站模板 Certy</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/7" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/moban71-300x213.gif">
<div><b>炫酷博客杂志资讯网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/8" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/12/win.png">
<div><b>仿windows桌面主题特效</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/9" target="_blank"><div class="musour-icon website">
<img src="">
<div><b>婴儿用品商店</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/10" target="_blank"><div class="musour-icon website">
<img src="">
<div><b>卡通动漫游戏专题网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/11" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221016185945-300x140.png">
<div><b>小学教育卡通网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/12" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/moban12-1-300x201.png">
<div><b>游戏制作公司官网网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/13" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/moban13-300x141.png">
<div><b>明星个人简介网页模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/14" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/moban14-3-300x140.png">
<div><b>旅游景区介绍html5模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/15" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/moban15-300x141.png">
<div><b>12种网站图片展示方式</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/16" target="_blank"><div class="musour-icon website">
<img src="">
<div><b>玻璃态创意云设计</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/17" target="_blank"><div class="musour-icon website">
<img src="">
<div><b>Game Robo游戏公司网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/18" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/moban18-1-300x150.png">
<div><b>蓝色IT互联网企业官网模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/19" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/moban19-1-300x153.png">
<div><b>电影影视门户网站html5模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/20" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/moban20-1-300x139.png">
<div><b>公共租赁住房信息后台管理系统</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/21" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/moban21-2-300x173.png">
<div><b>创意博客HTML5网页模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/22" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/moban22-1-300x180.png">
<div><b>简洁关于我们介绍页模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/23" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/10/moban23-1-300x174.png">
<div><b>半透明个人博客HTML模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/24" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/12/24.png">
<div><b>音乐炫彩背景网页模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/25" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/12/25.png">
<div><b>简约蓝软件公司网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/26" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/12/26.png">
<div><b>蓝色风格房地产网站模板下载</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/27" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/12/27.png">
<div><b>房产经纪网站HTML模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/28" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2022/12/28-2.png">
<div><b>蓝色渐变背景相册作品集网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/29" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2023/03/29.png">
<div><b>网页游戏开发公司网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/30" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2023/03/20230326234041.png">
<div><b>卡通涂鸦效果网站html模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/31" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2023/05/20230503020846.png">
<div><b>大气黑色质感风格游戏网站整站模版</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/32" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2023/05/2021092216424068958.jpg">
<div><b>网上订花商城HTML网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/33" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2023/05/2021092216352989298.jpg">
<div><b>SEO优化团队类网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/34" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2023/05/2021091617265977698.jpg">
<div><b>美国律师事务所企业网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/35" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2023/05/2021091517151234107.jpg">
<div><b>宽屏UI设计师个人简历网页模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/36" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2023/05/2021091517092066125.jpg">
<div><b>室内装修设计类网站静态模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/37" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2023/05/2021091517083243230.jpg">
<div><b>大气扁平化旅行网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/38" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2023/05/2021091416423148171.jpg">
<div><b>二手豪车销售官网网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/39" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2023/05/2021091416394585896.jpg">
<div><b>业务销售统计管理网站模板</b>
</div>
</div></a>
<a href="https://haiyong.site/moban/40" target="_blank"><div class="musour-icon website">
<img src="https://code.haiyong.site/wp-content/uploads/2023/06/20230605104722-700x465.png">
<div><b>html在线商城网站模板</b>
</div>
</div></a>
</div></div>
</div>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oranienbaum:300,400,700,800' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
\ No newline at end of file
</html>
script.js
浏览文件 @ 78b78bba
// 初始化 isotope
var $grid = $('.grid').isotope({
itemSelector: '.musour-icon'
});
var filters = {};
$('.filters').on( 'click', '.button', function( event ) {
var $button = $( event.currentTarget );
var $buttonGroup = $button.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
filters[ filterGroup ] = $button.attr('data-filter');
var filterValue = concatValues( filters );
$grid.isotope({ filter: filterValue });
});
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function( event ) {
$buttonGroup.find('.is-checked').removeClass('is-checked');
var $button = $( event.currentTarget );
$button.addClass('is-checked');
});
});
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}
\ No newline at end of file
style.css
浏览文件 @ 78b78bba
html{
height: 100%;
width: 100%;
:root {
--accentOne: #A3B29F;
--accentTwo: #D1D3B9;
--accentThree: #D2BD76;
--background: #eeeeee;
--backgroundTwo: #e5e5e5;
--text: #555555;
--title: Oranienbaum, serif;
--body: Open Sans, sans serif;
}
body { margin:0px!important;background-color:var(--background); }
a { text-decoration:none!important; }
.musour { display:grid;height:100vh;width:100vw;grid-template-columns:280px auto;overflow-y:hidden; }
.musour-left { padding:50px;color:var(--text);font:12px var(--body);display:flex;height:calc(100vh - 100px);flex-direction:column; }
.musour-title { font:40px var(--title);line-height:40px;padding-top:3px; }
.musour-title div { font-size:99px;margin-left:-2px;line-height:80px;color:#75d25d; }
.musour-title-2 { background:linear-gradient(to bottom left,var(--accentOne),var(--accentTwo));font:700 10px var(--body);line-height:10px;padding:14px 0px 16px 4px;text-align:center;color:var(--background);letter-spacing:4.2px;border-radius:10px;margin:15px 0px 30px 0px;cursor:pointer;transition:.3s all; }
.musour-title-2:hover { transform:scale(1.05);opacity:.8; }
.musour-blurb { text-align:justify;line-height:18px; }
.musour-filters { margin-top:30px;flex-grow:1;overflow:auto; }
.musour-filters::-webkit-scrollbar-thumb { border-left:solid 15px var(--background);background:linear-gradient(to bottom,var(--accentOne),var(--accentTwo)); }
.musour-filters::-webkit-scrollbar { width:16px; }
.musour-filters div { display:flex;flex-direction:column; }
.musour-filters h1 { background-color:var(--backgroundTwo);font:700 10px var(--body);line-height:10px;padding:14px 0px 16px 4px;text-align:center;color:var(--text);letter-spacing:4.2px;border-radius:10px;margin:20px 0px;text-transform:uppercase;line-height:12px; }
.musour-filters button { margin-top:0px;border:none;background:transparent;text-align:left;padding:0px;cursor:pointer;font:12px var(--body);color:var(--text);line-height:20px;transition:.3s all; }
.musour-filters .is-checked { font-weight:700!important; }
.musour-filters button::before { content:'+';color:var(--accentOne);padding-right:10px; }
.musour-filters button:hover { color:var(--accentOne); }
.container {
text-align: center;
padding: 64px;
}
\ No newline at end of file
.musour-color { flex-direction:row!important;flex-wrap:wrap;justify-content:center;gap:8px; }
.musour-color button { height:20px;width:20px;background:linear-gradient(to bottom left,var(--accentOne),var(--accentTwo));border-radius:3px; }
.musour-color .red { background:#B45758!important; }
.musour-color .orange { background:#AE8657!important; }
.musour-color .yellow { background:#AAA95F!important; }
.musour-color .green { background:#5C916B!important; }
.musour-color .blue { background:#6599B0!important; }
.musour-color .purple { background:#8564AD!important; }
.musour-color .pink { background:#B9619D!important; }
.musour-color .brown { background:#735E45!important; }
.musour-color .black { background:#555555!important; }
.musour-color .gray { background:#bbbbbb!important; }
.musour-color .white { background:var(--backgroundTwo)!important; }
.musour-color button::before { display:none; }
.musour-right { background:linear-gradient(to bottom left,var(--accentOne),#41c8fb);border-radius:50px 0px 0px 0px;padding:75px;min-width:490px;box-shadow: 0px 0px 20px rgba(44,44,44,.1);box-shadow:none; }
.musour-right .grid { max-height:calc(100vh - 150px);overflow:auto; }
.musour-right .grid::-webkit-scrollbar-thumb { background-color:var(--background);border-radius:5px; }
.musour-right .grid::-webkit-scrollbar { width:10px; }
.musour-icon { background-color:var(--background);padding:15px;border-radius:15px;width:100px;margin:0px 25px 25px 0px;box-shadow: 5px 5px 10px -3px rgba(44,44,44,.05);height:110px;transform:scale(1);transition:.3s all; }
.musour-icon img { height:70px;width:100px;border-radius:5px 5px 0px 0px;margin-bottom:0px!important;display:block;/* filter:grayscale(75%) contrast(100%); */opacity:1;transition:.3s all; }
.musour-icon div { border-radius:0px 0px 5px 5px;background-color:var(--backgroundTwo);padding:10px;font:11px var(--body);color:var(--text);text-transform:lowercase;line-height:13px;font-style:italic;height:20px;display:flex;flex-direction:column;justify-content:center; }
.musour-icon div b { display:block;font-style:normal!important;color:var(--accentOne);text-transform:uppercase; }
.musour-icon:hover { transform:scale(1); }
.musour-icon:hover img { opacity:1;filter:grayscale(0%) contrast(100%)!important; }
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或