--- theme: vuepress --- ## 写在前面 **预览图皆为动图，文件体积略大，请大家耐心等待** 本文包含了众多的 `html + css + canvas + js` 实现的前端动画，为了以免大家复制代码出错，故提供了完整的网盘下载路径，供大家直接下载 ## 网盘路径 [ 提取码：8888](https://pan.baidu.com/s/1opqJuJUsdCsuRaOCDMIf6g?pwd=8888) > 所有的例子都并非可完完全全应用到实际需求场景中的 > > 本文所有的例子均是提供一个思路和方法，供大家改造 ### 一. HTML5 房屋装饰工具 ![1.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/73ae8d8facc94b7ebb6a73706e828ed0~tplv-k3u1fbpfcp-watermark.image#?w=1240\&h=896\&s=1061254\&e=gif\&f=272\&b=dbecc5) ### 二. HTML5/CSS3 粒子效果进度条 ![1 (1).gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ccbb653602d84b3393ca38475500e0a3~tplv-k3u1fbpfcp-watermark.image#?w=744\&h=392\&s=323793\&e=gif\&f=138\&b=151513) ### 三. Canvas 粒子效果文字动画特效 ![3.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c257df00f3d14ac690ebe1fe2dbdc6a0~tplv-k3u1fbpfcp-watermark.image#?w=1336\&h=744\&s=24405772\&e=gif\&f=725\&b=cae8e3) 支持多种动态例子，欢迎大家前去尝试 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f895f0d3b5ae4eae89d6fd74e915adf4~tplv-k3u1fbpfcp-watermark.image#?w=709\&h=513\&s=37133\&e=png\&b=f3f9fa) ### 四. Canvas 粒子模拟效果 ![1 (2).gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3718800e1ab4191aea94505349ffcc9~tplv-k3u1fbpfcp-watermark.image#?w=1488\&h=636\&s=3340815\&e=gif\&f=181\&b=141312) ### 五. Canvas 实现会跳舞的时间动画 ![1 (2).gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/254396c1a13846ff9059023e625e92d6~tplv-k3u1fbpfcp-watermark.image#?w=1488\&h=636\&s=3009359\&e=gif\&f=147\&b=fdfcff) ### 六. HTML5 火焰文字特效 ![1.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/facd53e25a3f4624aa34fc25aa76d0ef~tplv-k3u1fbpfcp-watermark.image#?w=1112\&h=728\&s=9418147\&e=gif\&f=239\&b=000000) ### 七. Canvas 3D 倒计时爆炸特效 ![2.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca13a91fac1346a3b2a80c889ae10cc1~tplv-k3u1fbpfcp-watermark.image#?w=1184\&h=896\&s=2731276\&e=gif\&f=289\&b=fdfcff) ### 八. Canvas 鼠标滑过星空背景特效 ![1.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4281a7944d4d4a5192a654b2223a291b~tplv-k3u1fbpfcp-watermark.image#?w=1240\&h=896\&s=2965335\&e=gif\&f=129\&b=04806f) ### 九. css3 跑马灯 **预览图** ![aa7f789dd5e74deca36f32b44438bc50.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/561234e6be4e4d35b3fa2a8f938ace13~tplv-k3u1fbpfcp-watermark.image#?w=640\&h=312\&s=439616\&e=gif\&f=132\&b=3c3a1e) **源码** ```js

``` ### 十. css3 彩虹爱心 **预览图** ![a444f8f8d2cb482ca8fc3349f9be6055.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/11b35e37e4fc4480ab3a8f6295f26a48~tplv-k3u1fbpfcp-watermark.image#?w=640\&h=360\&s=2475324\&e=gif\&f=99\&b=37aa8b) **源码** ```js const colors = ["#e03776","#8f3e98","#4687bf","#3bab6f","#f9c25e","#f47274"]; const SVG_NS = 'http://www.w3.org/2000/svg'; const SVG_XLINK = "http://www.w3.org/1999/xlink"; let heartsRy = [] function useTheHeart(n){ let use = document.createElementNS(SVG_NS, 'use'); use.n = n; use.setAttributeNS(SVG_XLINK, 'xlink:href', '#heart'); use.setAttributeNS(null, 'transform', `scale(${use.n})`); use.setAttributeNS(null, 'fill', colors[n%colors.length]); use.setAttributeNS(null, 'x', -69); use.setAttributeNS(null, 'y', -69); use.setAttributeNS(null, 'width', 138); use.setAttributeNS(null, 'height', 138); heartsRy.push(use) hearts.appendChild(use); } for(let n = 18; n >= 0; n--){useTheHeart(n)} function Frame(){ window.requestAnimationFrame(Frame); for(let i = 0; i < heartsRy.length; i++){ if(heartsRy[i].n < 18){heartsRy[i].n +=.01 }else{ heartsRy[i].n = 0; hearts.appendChild(heartsRy[i]) } heartsRy[i].setAttributeNS(null, 'transform', `scale(${heartsRy[i].n})`); } } Frame() ```