js之好看的鼠标点击-光标特效

 1.鼠标光标特效

<script src="https://blog-static.cnblogs.com/files/axqa/bubbleCursor.js"></script>      <!--光标之泡泡-->

<script src="https://blog-static.cnblogs.com/files/axqa/emojiCursor.js"></script>       <!--笑脸-->

<script src="https://blog-static.cnblogs.com/files/axqa/batsCursor.js"></script>        <!--蝙蝠-->

<script src="https://blog-static.cnblogs.com/files/axqa/fairyDustCursor.js"></script>   <!--仙女棒-->

<script src="https://blog-static.cnblogs.com/files/axqa/ghostCursor.js"></script>       <!--鼠标-->

<script src="https://blog-static.cnblogs.com/files/axqa/snowflakeCursor.js"></script>   <!--雪花-->

 

使用示例：

new fairyDustCursor({ element: document.querySelector("#fairyDust") })
new ghostCursor({ element: document.querySelector("#ghost") })
new springyEmojiCursor({ element: document.querySelector("#springs") })
new emojiCursor({ element: document.querySelector("#emoji") })
new bubbleCursor({ element: document.querySelector("#bubbles") })
new snowflakeCursor({ element: document.querySelector("#snowflake") })

 

Github 网址：https://github.com/tholman/cursor-effects     

Demo 下载

2.鼠标点击特效

 

  <script src="https://blog-static.cnblogs.com/files/axqa/cursor-effects.js"></script> //点击后出现烟花效果

注释：最好转存到自己的文件下，以防丢失。

                                     

3.简单看板娘特效

<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-shizuku@1.0.5/assets/shizuku.model.json", "scale": 1 },
        "display": { "position": "left", "width": 150, "height": 300, "hOffset": 0, "vOffset": -20 },
        "mobile": { "show": true, "scale": 0.5 },
        "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 }
    });
</script>