摘要：在融合动画的过程中，我并不想让动画占用网页的版面，而是作为背景动画。作为背景层进行动画绘制，内容文字层悬浮在上面。简化的代码是这样浮动在上的文字内容官方截图到这里全背景动画问题已经顺利的解决了。
在日常的学习中我接触到一些HTML5 Canvas动画，在开发 tiomg.org 太美在线工具网站 的时候，想将这些震撼或小清新的动画融合到工具网站中，这样可以使原本单调的网页看起来丰富和更有设计感。
网站发布后，有程序开发的小伙伴和站长询问怎么实现的，我也乐于分享将使用的开源组件和实现告诉大家。有些同学还是不太明白，我答应后面写一篇博客来的。前几个月一直focus在网站的一些新功能上和帮忙解决一些定制问题，今天才开始动手写这篇博客来分享我的实现思路。
在本文中我将以本网站标志性的 Particleground粒子动画（github） 作为实例进行讲解，如何进行实现。先贴出 Particleground官方demo （如下图），让大家对粒子动画有个直观的了解。这里也非常感谢Horia Dragomir贡献了这个非常震撼的HTML5 Canvas动画。
在融合HTML5 Canvas动画的过程中，我并不想让HTML5 Canvas动画占用网页的版面，而是作为背景动画。正如你所看到的，官方的demo已经给出了这样的例子，tiomg.org的登录页面也是这么去实现。canvas作为背景层进行动画绘制，内容文字层悬浮在canvas上面。简化的代码是这样：
官方demo html截图：
到这里Canvas全背景动画问题已经顺利的解决了。但是在开发 tiomg.org 网站的时候，我有了一个更有趣的想法，我希望Canvas背景动画不是占满整个页面的背景，而是页面的一块区域，高度是由子元素来决定，并且完全兼容bootstrap响应式设计。就像是我们常用的CSS背景图片：background-image: url(bgimage.gif);，一般我们给父元素添加background-image，子元素（透明）撑开并决定父元素的大小。
HTML5
这里贴出HTML简化代码：
浮动在canvas上的文字/内容
因为不能运行js代码，我录制了本地网页的gif动图代替实际效果。如果想自己本地看实际效果，你可以点击 实际效果展示及源码下载。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114131.html
摘要：在融合动画的过程中，我并不想让动画占用网页的版面，而是作为背景动画。作为背景层进行动画绘制，内容文字层悬浮在上面。简化的代码是这样浮动在上的文字内容官方截图到这里全背景动画问题已经顺利的解决了。 在日常的学习中我接触到一些HTML5 Canvas动画，在开发 tiomg.org 太美在线工具网站 的时候，想将这些震撼或小清新的动画融合到工具网站中，这样可以使原本单调的网页看起来丰富和更...
摘要：在融合动画的过程中，我并不想让动画占用网页的版面，而是作为背景动画。作为背景层进行动画绘制，内容文字层悬浮在上面。简化的代码是这样浮动在上的文字内容官方截图到这里全背景动画问题已经顺利的解决了。 在日常的学习中我接触到一些HTML5 Canvas动画，在开发 tiomg.org 太美在线工具网站 的时候，想将这些震撼或小清新的动画融合到工具网站中，这样可以使原本单调的网页看起来丰富和更...
摘要：前言本文讲解道前端面试的的内容。文章原文地址前端硬核面试专题之问。前端硬核面试专题的完整版在此前端硬核面试专题，包含数据结构与算法。 showImg(https://segmentfault.com/img/bVbv2GE?w=900&h=400); 前言 本文讲解 55 道前端面试的 CSS 的内容。 复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！ 注意：文章...
阅读 1783·2023-04-26 00:47
阅读 1542·2021-11-11 16:55
阅读 2596·2021-09-27 14:04
阅读 3547·2021-09-22 15:58
阅读 3553·2021-07-26 23:38
阅读 2127·2019-08-30 13:47
阅读 1977·2019-08-30 13:15
阅读 1139·2019-08-29 17:09
