教你如何在博客或网站背景上放一只会动的猫!
很多时候我们想给网站加些特效,可是自己写代码太麻烦了;于是我们都会去找第三方库。
就在昨天我刷博客看到有人背景上有一只猫咪🐱。当时我就很喜欢,于是我尝试抓了一下源码,功夫不负有心人,很轻松的抓到了“黑猫咪”源码。记得曾经还看到过“白猫咪”所以果断上CSDN搜了一番。折腾半天终于找到了白猫源码。
先给我自己用上了,后来想着可能有些朋友也需要,于是我写了这篇博客分享一下。
黑猫源码
<div id="page_end_html">
<!--看板娘 - 黑猫-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json", <!--这里改模型,前面后面都要改-->
"scale": 1
},
"display": {
"position": "left", <!--设置看板娘的上下左右位置-->
"width": 100,
"height": 200,
"hOffset": 0,
"vOffset": 0
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7, <!--设置透明度-->
"opacityOnHover": 0.2
}
});
window.onload = function() {
$("#live2dcanvas").attr("style", "position: fixed; opacity: 0.7; left: 70px; bottom: 0px; z-index: 1; pointer-events: none;")
}
</script>
</div>
白猫咪源码
<!--白小猫咪-->
<script src=" https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.0.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: " https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json" ,
"scale": 1
},
"display": {
"position": "right",
"width": 100,
"height": 200,
"hOffset": -20,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 1,
"opacityOnHover": 1
}
});
</script>
白猫咪效果看此站、黑猫咪效果看“木子科技站”。
有了代码,我们只需要把它复制到和 中间任意地方即可,想要每个页面都加上这种特效,只需要把这段代码放到header或footer等其他公用文件中即可!
越接近,越完美;用捷径,更轻松!