js—<canvas>鼠标跟随及网页套用

最新推荐文章于 2024-05-17 14:31:18 发布

泠木有苍雪

最新推荐文章于 2024-05-17 14:31:18 发布

阅读量775

点赞数

文章标签： canvas 动画特效网页

本文链接：https://blog.csdn.net/m_ying/article/details/82533105

版权

今天闲来无事，记一下笔记。

在去年的时候就初步了解了<canvas>这样的js动画特效，，但是那时尚不会套用，也不会自己写，不过现在初步学习了一下怎么套用，还有写网页的一些其他的动画效果，类似transition: all .6s ease-in-out;此类的标签的使用！

首先直接上网页的效果图给大家看看：
这里写图片描述
这是我的第一个网页部分界面，均为自己设计的排版，果子吊在树上，加入了三个超链接，这里能很清楚的看到左边还有一些粒子的效果，作为一个初学者，这样的粒子特效我是写不出来的，但是，我能调用与更改，得到自己想要的效果。

这里写图片描述
这里也是我的另一个配套网页的部分界面，也有很明显的金黄色粒子特效，这个在个人网页的设计上特别有活力！
那么接下来我来介绍怎么使用<canvas>此类js动画特效。

第一步：查看网上的原代码

网址：
http://www.jq22.com/search?seo=%E9%BC%A0%E6%A0%87%E8%B7%9F%E9%9A%8F

这里写图片描述
在其中随意找到自己喜欢的效果，并点击打开。

我们可以看到，有很多都是有源代码的，这是我们学习的好地方！感谢伟大的jquery网站！
这里写图片描述
第二步：
在上图左边一栏写有html、css、js；这就分别对应好了我们<canvas>应该放置在哪里。
在.html文件的<body>内写好<canvas></canvas>
在.css文档内设置<canvas>的样式
新建.js文档并将js栏对应的代码贴入到js文档内
如我的网页代码所写：

//html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
   <meta charset="utf-8">
   <title>动画师的修炼手册</title>
   <link rel="shortcut icon" href="images/bitbug_favicon.ico">
   <script type="text/javascript" src="1.js" ></script>
   <link rel="stylesheet" type="text/css" href="动画师的修炼手册.css" />
</head>

<body>
<canvas>
</canvas>
<embed src="sound/一.mp3" autostart="true" loop="true" hidden="true"></embed>
<div id="zhuti">
   <div id="header">
   <h1>动画师的修炼手册</h1>
   </div>

     <div class="car"><img src="images/123.gif"></div>

<div id="Background">

  <div id="One" class="fruit">
    <h2><a href="珍贵的尘土.html">珍贵的尘土</a></h2>
    <img src="images/ps2.png">

  </div>

  <div id="Two" class="fruit">
    <h2><a href="邻家有画初长成.html">邻家有画初长成</a></h2>
    <img src="images/ps.png">

  </div>


  <div id="Three" class="fruit">
    <h2> <a href="一封寄给动画的信.html">一封寄给动画的信</a></h2>
    <img src="images/ps1.png">

  </div>

</div>

<div id="Four">
    &copy; 2018, M-Ying;
    <p>物转星移，花开花落，周而复始，生生不息，但今昔已非昨日，然今日花容依旧。————《虫师》</p>
</div>
</body>


</html>

然后是css添加：

canvas{
  position:absolute;
  width: 100%;
  height: 1000px;
 /* background: #d4f5e8;*/
}

根据自行需要设置高和宽，以及位置
最后是js代码。。。这里等我把语法学会了就自己写超级炫酷的粒子特效

这样就能成功啦，但是关于粒子特效有一点说明，鼠标跟随后超链接的使用会出现很大的问题，请慎重选择鼠标跟随的使用，还有，作为网页设计的考虑，鼠标跟随适合于个人网页，对于专用大型网站不是很使用。
这就是初步使用方法了。

关于transition: all .6s ease-in-out;的使用记录，这个属性也是特别厉害了，明天我要好好学学：
我发现这个动画效果特别精致，不是js代码，也不是<canvas>的徒弟，而是一个css内的样式。
大致说明一下：它可以实现图片的悬浮、缩放、滑动等特点。常用的方法是ease-in-out

可参考一下网站： https://www.cnblogs.com/afighter/p/5731293.html

all：动画出场的方式
.6s：时间设置
ease-in-out：规定以慢速开始和结束的过渡效果

结束！

泠木有苍雪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js—<canvas>鼠标跟随及网页套用

今天闲来无事，记一下笔记。在去年的时候就初步了解了&lt;canvas&gt;这样的js动画特效，，但是那时尚不会套用，也不会自己写，不过现在初步学习了一下怎么套用，还有写网页的一些其他的动画效果，类似transition: all .6s ease-in-out;此类的标签的使用！首先直接上网页的效果图给大家看看：这是我的第一个网页部分界面，均为自己设计的排版，果子吊在树...
复制链接

扫一扫