前言：
现时看官们对“html动画制作”都比较注意，大家都想要知道一些“html动画制作”的相关资讯。那么小编在网上收集了一些有关“html动画制作””的相关内容，希望朋友们能喜欢，各位老铁们快快来了解一下吧！今天给学生们讲解DOM部分的最后一节课，随堂做了几个小例子，下面一其中一个：鼠标跟随动画效果展示的学生源码。同学们完全理解了其中的法门和窍门。今天心情很好。
视频加载中...
以下是学生写的源代码：
HTML文件：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画演示</title> <style> @keyframes dh { 0%{width:10px;height:10px;opacity:1} 100%{width:200px;height:200px;opacity:0} } ul.nav{border:1px solid #f00;margin:0;padding:0;list-style: none;display: flex;} ul>li{width:40%;border:1px solid #000;text-align: center;line-height: 50px;;} </style></head><body><script src="js3.js" ></script> </body></html>JS文件：
var t = truefunction play(event){ var x = event.clientX var y = event.clientY let oDiv = document.createElement("div") oDiv.style="width:10px;height:10px;background:#f00;border:1px solid #900;position:absolute;border-radius:50%" oDiv.style.top = y + "px" oDiv.style.left = x + "px" oDiv.style.animation = "dh 1.5s" document.body.appendChild(oDiv) setTimeout(function(){ document.body.removeChild(oDiv) },1500)}function clearplay(){ if(t){ document.removeEventListener("mousemove",play) }else{ document.addEventListener("mousemove",play) } t = !t}document.addEventListener("mousemove",play)document.addEventListener("click",clearplay)没有用任何语法糖，因为语法糖部分还没有讲到。最起码，同学们是真正的了解到了制作这些小玩意儿的精要所在。
在德州，培训出一些编程的好手，心里还是很高兴的，毕竟是我的家乡。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
