JavaScript制作动画

绝地灬酷狼 2022-10-22 01:40 161阅读 0赞

# JavaScript制作动画 #

![在这里插入图片描述][20210402215923423.gif]

<!DOCTYPE html>
    <html>
    <style> #container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; } </style>
    <body>
    
    <p><button onclick="myMove()">单击我</button></p> 
    
    <div id ="container">
      <div id ="animate"></div>
    </div>
    
    <script> function myMove() { var elem = document.getElementById("animate"); var pos = 0; var id = setInterval(frame, 5); function frame() { if (pos == 350) { clearInterval(id); } else { pos++; elem.style.top = pos + "px"; elem.style.left = pos + "px"; } } } </script>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 2]

[20210402215923423.gif]: /images/20221022/ba742699e43840a590f437e5a5875b09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70]: /images/20221022/18ab92834c744b1e9bb3f94862e40f74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/fcad3d3d76d5467fa187982772bd862e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/0ccfcce2e62e4a73a8765ab5cc1ac190.png

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript怎么制作动画？

![55bac8d1f9a345e6b76071992058cb21.gif][] 当我们用鼠标点击滑块时就可以拖拽，当滑块左外边距超过背景开关宽度的一半时，灯泡亮起；小于一

Bertha 。/ 2024年04月01日 10:36/ 0 赞/ 66 阅读

相关 3D动画制作过程

互联网的形态一直以来都是2D模式的，但是随着3D技术的不断进步，国产动漫也正是这个时候崛起了，在未来的5年时间里，将会有越来越多的互联网应用以3D的方式呈现给用户，包括网络视讯

小灰灰/ 2023年01月10日 03:57/ 0 赞/ 208 阅读

相关 JavaScript制作动画

JavaScript制作动画 ![在这里插入图片描述][20210402215923423.gif] <!DOCTYPE html> <html>

绝地灬酷狼/ 2022年10月22日 01:40/ 0 赞/ 162 阅读

相关 cocosudio 骨骼动画制作

首先基本步骤转官方文档后续学习实现新建骨骼动画首先点击屏幕右上角的文件->新建文件（快捷键：Command+N），打开如下界面，选择骨骼动画，点创建：

雨点打透心脏的1/2处/ 2022年09月22日 15:59/ 0 赞/ 445 阅读

相关制作翻转效果动画

经测试改动画在移动端兼容有一些问题，要兼容移动端可前往[https://blog.csdn.net/u012011360/article/details/92766950][h

女爷i/ 2022年08月04日 04:08/ 0 赞/ 211 阅读

相关制作svg动画

要实现一步一步画出来一个图片，css3做不到吧，除非一张张的图片定时显示。想不到别的招了。现在用的是一个插件，做了一个svg动画。插件地址：http://lazylinep

不念不忘少年蓝@/ 2022年08月03日 03:08/ 0 赞/ 239 阅读

相关 svg入门制作简易动画

svg的分量越来越重要了，如果你学好了svg也能在前段站住一席之地今天主要使用svg制作一个简易的人物动画；纯手工制作，有些粗糙，主要是熟悉svg，各位看了之后可以试

╰半夏微凉°/ 2022年05月29日 12:13/ 0 赞/ 542 阅读

相关 [译] JavaScript 线性代数：使用 ThreeJS 制作线性变换动画

> 原文地址：[Linear Algebra with JavaScript: Animating Linear Transformations with ThreeJS

Love The Way You Lie/ 2022年01月10日 08:23/ 0 赞/ 620 阅读

相关 JavaScript 线性代数：使用 ThreeJS 制作线性变换动画

目标在本文中，我们将制作一个组件，用于对三维空间的对象的线性变换进行可视化。最终效果如下面的动图所示，或者你也可以在[此网页][Link 1]体验。 ![app

一时失言乱红尘/ 2021年09月20日 05:44/ 0 赞/ 803 阅读

相关进度条制作-CSS动画

温馨提示代码参考 \[本人博客\]：https://blog.csdn.net/qq\_41115965/article/details/83713343

╰半夏微凉°/ 2021年09月16日 21:30/ 0 赞/ 368 阅读