网站鼠标点击炫酷特效分享

今天给大家分享的是一个非常有意思的网页鼠标点击特效,具体效果如下:

网页鼠标点击特效

总得来说这个特效还是非常棒的,颜色搭配清新,效果也比较炫酷,喜欢的小伙伴可以在下方进行下载。

演示地址:http://img.hellomoban.com/2.html

下载地址:https://pan.baidu.com/s/1yMtmELoekPyef4wwPTJS6w        提取码:iq23

鼠标点击特效的由来

起初这个鼠标点击特效还是无忧老司机发现的,那天聊天他说别人分享了一个鼠标点击特效文件,阿南在看了效果发现不错就要来了。但是由于阿南对于php不熟悉,所以试了好几次都没有把这个特效应用到博客,后面还是请到了大佬出手才帮忙搞定。

鼠标点击特效的应用

在上方将此鼠标点击特效文件下载解压之后,将两个js文件与一个css文件上传至wordpress主题目录下,接着再将以下代码写入主题的头部文件(head.php)当中,代码写入头部文件的具体位置可参考本站网页源代码。

<style>
.fireworks {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<canvas class=”fireworks” style=”position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;”></canvas>
<script src=”https://www.tzrseo.com/wp-content/themes/justnews/anime.min.js”></script>
<script src=”https://www.tzrseo.com/wp-content/themes/justnews/cursor.js”></script>
<script type=”text/javascript”>
fireworks.setCanvasSize();
</script>

<!–别忘了将路径修改成你网站的路径–>

以上就是关于这个网页鼠标点击特效的由来以及应用教程,应用代码来自于建站吧博主,在此表示感谢!

免责声明:本文来自网络用户投稿,不代表本站观点和立场。如有侵权请发送邮件至tzanseo@163.com告知本站删除,本站不负任何责任及承诺。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

发表评论

登录后才能评论

评论列表(11条)

  • ss
    ss 2019年10月27日 01:10:03

    请问在vue-cli项目中可以使用吗?如果可以该怎么使用呢?

    • 阿南
      阿南 2019年10月30日 03:40:22

      @ss你好,这个我没有试过哦!非常抱歉!

  • wordpress建站吧
    wordpress建站吧 2019年4月26日 15:01:33

    估计可以显著提高用户在页面的点击次数和停留时间

  • wordpress建站吧
    wordpress建站吧 2019年4月26日 15:00:52

    有些非主流。。意义不大

  • 青春的风采
    青春的风采 2019年4月22日 17:38:54

    织梦的模板可以用这种特效吗?

    • 阿南
      阿南 2019年4月23日 02:40:55

      @青春的风采这个跟什么系统的模板是没有直接的关系的,像织梦,帝国这些系统都是没有问题的,可以直接使用。

  • MAY的SEO博客
    MAY的SEO博客 2019年4月12日 16:10:19

    之前一直在找这个烟火效果的代码,感谢博主分享。

  • 红嘴鸭
    红嘴鸭 2019年4月11日 10:24:07

    多谢分享,确实很炫酷哦