鼠标跟随动画，粒子效果

canvas动画，鼠标跟随

项目下载地址：项目包下载

实现逻辑：
a.需要引入创建粒子背景的 JavaScript 库： particles.js
b. 配置动画参数，鼠标跟随参数
效果图：

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>动态效果</title><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><link rel="stylesheet" media="screen" href="css/style.css"><link rel="stylesheet" type="text/css" href="css/reset.css"/>
</head>
<body><div id="particles-js"></div><!-- scripts -->
<script src="js/particles.min.js"></script>
<script type="text/javascript">particlesJS('particles-js',{"particles": {"number": {"value": 40,"density": {"enable": true,"value_area": 800}},"color": {"value": "#ffffff"},"shape": {"type": "circle","stroke": {"width": 0,"color": "#000000"},"polygon": {"nb_sides": 5}},"opacity": {"value": 0.7,"random": false,"anim": {"enable": false,"speed": 1,"opacity_min": 0.1,"sync": false}},"size": {"value": 3,"random": true,"anim": {"enable": false,"speed": 40,"size_min": 0.1,"sync": false}},"line_linked": {"enable": true,"distance": 150,"color": "#ffffff","opacity": 0.6,"width": 1},"move": {"enable": true,"speed": 6,"direction": "none","random": false,"straight": false,"out_mode": "out","bounce": false,"attract": {"enable": false,"rotateX": 600,"rotateY": 1200}}},"interactivity": {"detect_on": "canvas","events": {"onhover": {"enable": true,"mode": "grab"},"onclick": {"enable": true,"mode": "push"},"resize": true},"modes": {"grab": {"distance": 200,"line_linked": {"opacity": 1}},"bubble": {"distance": 400,"size": 40,"duration": 2,"opacity": 8,"speed": 3},"repulse": {"distance": 200,"duration": 0.4},"push": {"particles_nb": 4},"remove": {"particles_nb": 2}}},"retina_detect": false});
</script>
</body>
</html>

鼠标跟随动画，粒子效果相关推荐

制作桌面精灵（动态桌面）——鼠标跟随的粒子效果
这里使用了nowpaper的一个例子: Silverlight C# 游戏开发:绚丽的粒子特效-颜色粒子(一) 我新建了一个WPF 3.5项目,将里面的代码添加了几个方法,就可以在桌面上使用这个效果. ...
html++鼠标跟随动画,5分钟实现Canvas鼠标跟随动画背景
关于Canvas制作炫酷背景,我会在git上不定时去更新,并会附上详细的解析,如果有喜欢的话,可以到git上瞧瞧前言相信很多前端小白都看过这样的背景动画,也好奇如何去实现这种效果!将这种效果应用到 ...
长方形面积+鼠标跟随动画
title: 长方形面积 + 鼠标跟随动画 tags: codepen category: 前端开发参考内容 https://www.bilibili.com/video/BV1Fy4y1g71h? ...
html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例
本文实例讲述了JS实现的简单鼠标跟随DiV层效果.分享给大家供大家参考,具体如下: 这段代码呈现一串跟随鼠标的Div效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的Div会自动 ...
html++鼠标跟随动画,css3动画过渡实现鼠标跟随导航效果
本篇文章主要介绍了css3动画过渡实现鼠标跟随导航效果,分享给大家,具体如下: 鼠标跟随导航效果效果知识点:html/css布局思维, div+css讲解,css3动画,盒子模型, 浮动与定位,鼠标 ...
html+js+css 调用jquery 工人信息管理功能（增删改查）前端实现，以及调用实现鼠标拖尾粒子效果的js库
html + js + css 调用jquery以及underscore.min.js(配合代码实现鼠标粒子效果)实现全前端信息管理基本功能(增删改查) 先附上我运行的一段视频,手机打开清晰一点或者直 ...
canvas动画粒子效果分享，可以做背景，超级好看
分享以下效果复制下一代到你的项目即可 <!DOCTYPE html> <html lang="en"> <head><meta char ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
CSS mask 实现鼠标跟随镂空效果
点击下方星标本公众号,实用前端技术文章及时了解偶然在某思看到这样一个问题,如何使一个div的部分区域变透明而其他部分模糊掉?,最后实现效果是这样的: 进一步,还能实现任意形状的镂空效果: 鼠标经过的 ...

鼠标跟随动画，粒子效果

鼠标跟随动画，粒子效果

canvas动画，鼠标跟随

鼠标跟随动画，粒子效果相关推荐

最新文章

热门文章