JavaScript鼠标跟随的心形粒子动画

来源:https://www.sucaihuo.com/js/3106.html 2017-09-29 13:27浏览(1940) 收藏

一款JavaScript鼠标跟随的心形粒子动画,粒子跟随鼠标的移动而移动,鼠标固定不动时,粒子自动拼成一个爱心的形状。
JavaScript鼠标跟随的心形粒子动画
分类:css3 > transform 难易:初级
查看演示 下载资源 下载积分: 10 积分

页面的head部分,需远程调用font-awesom图标字体库,并引入本地样式文件,代码如下:

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css"/>

页面的body部分,主要用了一个canvas标签来放入粒子效果,代码如下:

<canvas></canvas>
<!-- Social -->
<div class="twitter social-icon">
  <a href="http://www.sucaihuo.com" target="_blank"></a>
  <i class="fa fa-weixin fa-lg"></i>
</div>
<!-- Social -->
<div class="youtube social-icon">
  <a href="http://www.sucaihuo.com" target="_blank"></a>
  <i class="fa fa-qq fa-lg"></i>
</div>

页面的底部,需引入必要的JS文件,来响应鼠标移动的事件等,代码如下:

<script type="text/javascript" src="js/index.js"></script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2