为网页背景添加一个跟随鼠标变幻的动态线条

老虎说测试 前端技术字数 446阅读1分29秒阅读模式
摘要想让网页效果更炫,更酷,背景的动态效果是必然不可少的,现在介绍一款基于canvas绘制的网页背景特效给大家。

想让网页效果更炫,更酷,背景的动态效果是必然不可少的,现在介绍一款基于canvas绘制的网页背景特效给大家。

首先需要下载canvas JS文件,因为该效果是基于canvas制作的,下载如下文件:文章源自陈学虎-https://chenxuehu.com/article/2017/10/7050.html

然后将该文件放到你的主题目录中的JS文件夹内;文章源自陈学虎-https://chenxuehu.com/article/2017/10/7050.html

 文章源自陈学虎-https://chenxuehu.com/article/2017/10/7050.html

/wp-content/themes/你的主题/js/canvas-nest.min.js文章源自陈学虎-https://chenxuehu.com/article/2017/10/7050.html

 文章源自陈学虎-https://chenxuehu.com/article/2017/10/7050.html

然后修改你的主题内的footer.php文件,一般在文章源自陈学虎-https://chenxuehu.com/article/2017/10/7050.html

 文章源自陈学虎-https://chenxuehu.com/article/2017/10/7050.html

<?php wp_footer(); ?>

上面增加文章源自陈学虎-https://chenxuehu.com/article/2017/10/7050.html

 文章源自陈学虎-https://chenxuehu.com/article/2017/10/7050.html

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/js/canvas-nest.min.js"></script>

然后你就会看到如下的动态背景效果。文章源自陈学虎-https://chenxuehu.com/article/2017/10/7050.html

为网页背景添加一个跟随鼠标变幻的动态线条

 

 

 
  • 版权声明:本文为原创文章,转载请附上原文出处链接及本声明。
  • 转载请注明:为网页背景添加一个跟随鼠标变幻的动态线条 | https://chenxuehu.com/article/2017/10/7050.html
  • canvas
  • 网页背景