html5圆圈随机效果,HTML5 canvas圆形气泡动画背景插件

最新推荐文章于 2022-06-14 12:50:31 发布

袁mx

最新推荐文章于 2022-06-14 12:50:31 发布

阅读量397

点赞数

文章标签： html5圆圈随机效果

circleMagic.js是一款HTML5 canvas圆形气泡动画背景jquery插件。通过circleMagic.js你可以为banner或任何容器制作出随机动画的圆形气泡背景动画效果。

安装

可以通过bower来安装circleMagic.js插件。

bower install circleMagic --save

使用方法

在页面中引入circleMagic.js文件。

HTML结构

如果要为网站的顶部banner制作气泡背景动画效果，例如使用一个header元素来作为容器。

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化circleMagic.js圆形气泡动画背景插件。

$('.header').circleMagic({

elem: '.header',

radius: 35,

densety: .3,

color: 'rgba(255,255,255, .4)',

//color: 'random',

clearOffset: .3

});

配置参数

circleMagic.js圆形气泡动画背景插件的可用配置参数有：

参数

描述

elem

要应用圆形气泡动画背景效果的容器元素。

radius

定义圆形的半径。

densety

指定屏幕中显示圆形的密度。

color

圆形气泡的颜色。可以是CSS颜色值或关键字random。

clearOffset

定义消失的圆形气泡的数量。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

袁mx

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5圆圈随机效果,HTML5 canvas圆形气泡动画背景插件

circleMagic.js是一款HTML5 canvas圆形气泡动画背景jquery插件。通过circleMagic.js你可以为banner或任何容器制作出随机动画的圆形气泡背景动画效果。安装可以通过bower来安装circleMagic.js插件。bower install circleMagic --save使用方法在页面中引入circleMagic.js文件。HTML结构如果要为网站的顶...
复制链接

扫一扫

html5随机圆不重叠,随机不交叉重叠的圆圈

weixin_34382015的博客

06-02

309

JavaScript语言：JaveScriptBabelCoffeeScript确定// RequestAnimationFrame shim.window.requestAnimFrame = function() {return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozReq...

H5说话气泡点击动画

weixin_33800463的博客

11-07

233

目录需求思路实现半透明气泡制作 html结构 lessrem规则自己换算也可以使用px 对话框css动画添加计时器完成点击动画和计时动画封装功能函数函数调用需求还是要先把需求拿出来。要求：对话气泡要有动画，动画总共4秒在没有点击的时候，气泡每隔8秒出现一次在点击的时候，如果动画没有播放完毕就不执行，如果动画播放完毕，立即出现气泡然后还是把完...

参与评论您还未登录，请先登录后发表或查看评论

多泡html5,5.5 摆动的气泡 - HTML5 Canvas 实战

weixin_35652574的博客

06-25

214

本节，我们将使用简谐振荡和画布变形的原理创建一个栩栩如生的振荡气泡。图5-5 创建振荡的气泡操作步骤按照以下步骤，创建一个栩栩如生的振荡气泡，该气泡在空中飘荡：1. 链接到Animation类：2. 实例化一个Animation对象，并获取画布上下文对象：window.onload = function(){// instantiate new animation objectvar anim...

html5悬浮圆圈背景动画特效

09-13

html5悬浮圆圈背景动画特效

漂亮的html5线条背景动画特效

06-11

一款蓝色风格漂亮的html5线条背景动画特效，html5 svg线条不断出现并消失动画效果。

HTML5 canvas圆形气泡动画背景插件circleMagic.js.zip

11-03

HTML5 canvas圆形气泡动画背景插件circleMagic.js.zip

html5 canvas绘制圆形气泡背景动画特效

09-08

html5 canvas绘制圆形气泡背景动画特效

HTML5 Canvas彩色渐变背景动画效果

06-11

这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果，跟随鼠标移动的HTML5交互式渐变背景动画特效。

HTML5圆形气泡背景动画特效

06-24

HTML5圆形气泡背景动画特效是一款基于HTML5 Canvas实现的气泡背景动画下载。

html5 canvas绘制梦幻气泡背景动画特效

06-11

html5 canvas绘制梦幻气泡背景动画特效，大小不一的圆形气泡在网页上漂浮动画效果。

气泡动画背景插件circleMagic.js.zip

07-05

气泡动画背景插件circleMagic.js是一款可以为banner或任何容器制作出随机动画的圆形气泡背景动画效果。

气泡动画背景插件circleMagic.js特效代码

03-20

气泡动画背景插件circleMagic.js是一款可以为banner或任何容器制作出随机动画的圆形气泡背景动画效果。

js 特效 html 特效随机出现banner

09-03

js 特效 html 特效随机出现banner js 特效 html 特效随机出现banner

H5 DIV圆圈内随机运动

09-29

资源主要为两层DIV,外层DIV为一个圆形，内层DIV为一个方形。方形在外层DIV随机直线轨迹运动，不超出圆边界。

html5网页背景圆圈动画

ICode联盟

06-14

231

下载地址html5网页背景动态圆圈动画特效dd:

用canvas实现全屏背景冒泡动画

张致豪

07-14

3562

自己在Jquery网站发现了一款用canvas做的动画效果挺不错，自己根据源码进行了改进，用ES6封装了一个BGBubble类，通过调用其实例方法就可以实现效果 &amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;quot;en&amp;amp;amp

【CSON原创】HTML5圈泡泡游戏发布

weixin_34315485的博客

04-09

功能说明：　　在一分钟内，使用鼠标按着左键，在画布上圈泡泡，其中泡泡的分值分别为10（白）、20（浅蓝）、30（黄）、-10（红）、-20（绿）、-30（深蓝）分，可以一次圈多个泡泡，倒计时结束即计算总分值，该游戏基于cnGameJS。效果预览：实现分析：　首先每个小球定义一个ball类，由于小球需要使用图片，并且有一定的尺寸和运动，所以使该类继承cnGameJS的spri...

css动画+jQuery实现气泡背景

start_XUEBA的博客

03-19

1218

写了一个动态背景：渐变背景色下移，气泡上移。预览：实现思路： 1、先实现渐变背景：将背景色设为渐变（注意设置首尾颜色相同，否则动画时会出现明显分界线） background:linear-gradient(to bottom,#DFDFF5 ,#FF9980,#FFF280,#FFC080,#DFDFF5); 2、将背景动起来：先用 background-siz...

html5中让canvas所画的圆环具有颜色渐变的效果

最新发布

05-23

HTML5 Canvas是一个非常强大的Web绘图API，它可以用来绘制各种各样的图形、动画和特效，包括烟雾效果。下面介绍一种基于HTML5 Canvas的逼真烟雾效果插件的实现方法：步骤一：创建Canvas元素首先，在HTML文档中创建一个Canvas元素，并设置它的宽度和高度，如下所示： ``` <canvas id="canvas" width="600" height="400"></canvas> ``` 步骤二：编写JavaScript代码接下来，我们需要使用JavaScript代码来实现烟雾效果。首先，我们需要定义一个Smoke对象，它将包含烟雾效果的所有属性和方法。具体代码如下： ``` var Smoke = function(canvas) { this.canvas = canvas; this.width = canvas.width; this.height = canvas.height; this.ctx = canvas.getContext('2d'); this.particles = []; }; ``` 在上面的代码中，我们定义了一个Smoke对象，并将Canvas元素作为参数传入它的构造函数中。然后，我们获取Canvas的宽度和高度，并获取Canvas的2D上下文对象。最后，我们创建了一个空的particles数组，用于存储烟雾粒子。接下来，我们需要定义Smoke对象的两个方法：render()和update()。render()方法用于绘制烟雾效果，而update()方法用于更新烟雾粒子的位置和透明度。 ``` Smoke.prototype.render = function() { this.ctx.clearRect(0, 0, this.width, this.height); for(var i = 0; i < this.particles.length; i++) { var particle = this.particles[i]; this.ctx.beginPath(); this.ctx.fillStyle = 'rgba(255, 255, 255, ' + particle.opacity + ')'; this.ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2); this.ctx.fill(); particle.x += particle.vx; particle.y += particle.vy; particle.opacity -= particle.decay; if(particle.opacity <= 0) { this.particles.splice(i, 1); } } requestAnimationFrame(this.render.bind(this)); }; Smoke.prototype.update = function() { var particle = { x: this.width / 2, y: this.height / 2, radius: Math.random() * 20 + 20, vx: Math.random() * 2 - 1, vy: Math.random() * 2 - 1, opacity: Math.random() * 0.5 + 0.5, decay: Math.random() * 0.005 + 0.005 }; this.particles.push(particle); setTimeout(this.update.bind(this), Math.random() * 200 + 100); }; ``` 在上面的代码中，我们首先在render()方法中清除Canvas元素，并遍历particles数组中的每一个粒子。然后，我们使用Canvas的arc()方法绘制圆形烟雾粒子，并根据粒子的速度和透明度更新粒子的位置和透明度。最后，如果粒子的透明度小于等于0，就将它从particles数组中删除。在update()方法中，我们定义了一个新的粒子，并将它添加到particles数组中。然后，我们使用setTimeout()函数在随机的时间间隔之后再次调用update()方法，以添加更多的粒子。步骤三：初始化Smoke对象最后，在页面加载完成之后，我们需要创建一个Smoke对象，并调用它的render()方法和update()方法，如下所示： ``` window.addEventListener('load', function() { var canvas = document.getElementById('canvas'); var smoke = new Smoke(canvas); smoke.render(); smoke.update(); }); ``` 这样就完成了基于HTML5 Canvas的逼真烟雾效果插件的实现。你也可以根据自己的需求调整粒子的属性，以实现不同的效果。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交