js特效案例【js特效模板】 收藏 0

免费开源的五彩纸屑飞舞特效的 JS 库，多用于在网页上欢乐庆祝场景

今天看科技周刊看到的一个酷炫的动效库，使用简单，视觉效果很好，推荐给大家。

Canvas Confetti 是一个基于 JavaScript 的特效动画库，可以在网页界面上轻松地实现五彩纸屑飞舞的庆祝场景特效。这个特效库封装了几种酷炫的特效，开发者通过简单的几行代码就可以实现这些动效。

基础效果

• 内置的粒子系统、模拟重力、衰减、漂移等算法，完美模拟了纸屑飘落的效果，呈现出了媲美游戏的视觉效果；
• 五彩飞舞动画基于 HTML5 的 canvas 元素实现，兼容性不错；
• 除了内置的纸屑，也支持自定义纸屑的形状，图片、SVG和文字都支持；

我们都知道 CSS3 的动画很强大，但想要实现类似于抛撒碎纸屑这么复杂的动画时，CSS3 来实现就显得很困难了，以前我遇到这种需求，都是考虑通过 hilo.js 这样的 H5 游戏引擎中的粒子系统来实现。不过今天看阮一峰老师的科技周刊，看到他推荐了一款专门用来实现抛撒五彩纸屑动效的工具库，研究了一下发现效果很好，使用也简单，于是决定写一篇文章推荐给大家。

也可以在 HTML 的直接引入 js 文件：

通过下面几行代码就可以简单实现一个抛撒五彩纸屑的特效动画：

Canvas Confetti 的动画是在网页上创建了一个铺满全屏的画布（canvas），这个 canvas 是无法响应事件的，比如无法点击，这样就相当于覆盖了一个纯视觉的动画层，完全不影响原有的网页界面。

需要注意的是，Canvas Confetti 是一个 JS 工具库，但只能运行在客户端（浏览器环境），是不能运行在 Node.js 这样的服务端的。另外，Canvas Confetti 实例化后的对象返回的是 Promise 对象，现代浏览器都支持，但老旧的浏览器（如 IE）是不支持的，如果要在这些浏览器上运行，一般需要使用 Promise 的 polyfills 来保证正常支持 Promise。

一般来说，只需要搞懂下面几个参数就可以满足场景的庆祝场面，我总结了一下，见下面的表格：

主要参数说明

烟花效果

即把五彩纸屑替换成金色的星星。

粒子图案是星星

下面代码实现的是让白色的纸屑像雪花一样飘落满屏的效果，多在浪漫温馨的场景中使用。

雪花飘落效果

总之这个工具库功能真的很强大，上面几个都是很酷炫的效果，更多效果可以自己去尝试。

Canvas Confetti 是一个免费开源的 JS 动画特效工具库，项目源码基于 ISC 许可协议托管在 Github 上，我们可以自由地下载来使用，也可以免费授权用于商业项目。

↓↓点击查看本次分享的网站。

Canvas Confetti – 免费开源的五彩纸屑飞舞特效的 JS 库，多用于在网页上实现欢乐庆祝的场景

我用javascript写的街头霸王，KO所有程序员不成问题

各位头条的大佬，看到标题不要误会哈，KO所有程序员不是说代码啊，只是说的游戏，本人也是游戏王啊，小时候那个街头霸王，坦克大战，我可都是孩子王，不服来战！！（轻点打脸）

想要完整代码自己练习的小伙伴要关注我，只要私信我【学习】，即可领取粉丝福利。在自学过程中遇见问题了也可以随时问我。这里还是要说一下当然小白大牛我都欢迎，毕竟整天有人大神大神的叫，哈哈，也挺爽，不定期分享干货。想学到东西的都可以来，欢迎初学和进阶中的小伙伴

今天就给大家做一个街头霸王吧

效果图如下：

你喜欢玩哪个英雄呢

实现的功能如下：

javascript代码如下：

说实话，写完这个游戏我的目的一开始只是打算随便练习下，原本以为我不会去玩，但不骗大家 我竟然玩了三个小时！！三个小时啊！感觉自己一下子又回到了童年啊，有没有！特别还是自己写出来的，感觉更是不一般，不吹不黑KO人机妥妥的。

今天的这个案例就写完了，希望大家能够学习到东西。源码当然给大伙备好了啊，写了这么多文章也有这么多大伙捧我，不能让大家失望，代码文档版下面第三条建议会告诉大家。

心灵鸡汤来了！

学习java也是有难度的，前提是你的html和css学的应该要很好，您不能连html这东东是干啥的都不知道就开始学java了，有很多零基础的跑来问我，怎么写游戏，我就呵呵一句，先把基础布局学好吧。

再说几点建议：

1. 不要急于看一些复杂的javascript网页特效的代码，这样除了打击你的自信心，就是打击你的自信心。
2. 看网上什么几天精通javascript的，直接跳过吧，会浪费你很多时间，并且你还是学不会。
3. 这个案例就算做完了，想要完整代码自己练习的小伙伴要关注我，只要私信我【学习】，即可领取粉丝福利。在自学过程中遇见问题了也可以随时问我。

34.5K Star！50+个HTML/CSS and JavaScript特效项目！有你想要的！

小长假到来了，大家五一长假有什么节目呢？不妨可以在留言区分享下游玩的攻略！

前段时间在浏览github的时候，无意中发现了这样一个项目！它罗列了50+个基于HTML/CSS跟Javascript实现的小型网页项目，号称是可以让你50+天学习使用不带重样的。老码硬是不厌其烦的把每个项目的demo都点了一遍过去，确实无论是样式还是特效都可谓是美轮美奂，爱不释手！恨不得麻烦就能把它们应用到自己的网页中。那么我们先来看看其中的一些吧，因为实在太多了，本文实在罗列不过来，喜欢的朋友可以到开源地址看看，地址我放文末了！

扩充卡片，点击后显示另外的卡片效果

进度步骤条，点击可进入下一步的特效

酷炫的旋转导航动画

分页动画

动态的登录页模版

漂亮的倒计时特效

等等类似的这样的HTML/CSS Javascript项目有50+个，可以说是应有尽有了，假如你是一个网页设计师，或者美工，亦或者是前端开发者或者想学习前端的后端开发者，我想这些项目都是很不错的资源。都是有直接源码可以参考学习的

针对这些项目，你可以学习到一些设计灵感，你可以学到如何使用网页特效，你可以学习到漂亮的样式效果等等。总而言之，这个项目我个人认为是非常值得学习推荐的，喜欢的童鞋们具体可以去看一下下。我相信你们是可以看有所得的。对了，如果你觉得这篇写的东西对你有用，就分享下吧！

开源地址：https://github.com/bradtraversy/50projects50days

热门开源及工具推荐

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com