javascript - 如何在不失去可扩展性的情况下为网页(HTML/JS)制作动画?

标签 javascript html css animation interactive

我试图通过制作一个类似小镇的 map 来使我的网页更具交互性,不同的建筑物可以点击并导致我网站上的不同页面,但是我在为网页制作动画时遇到了很多困难仅 HTML/JS,即使在调整窗口大小后也能保持不变。

为了清楚起见,这是我现在的测试站点:https://people.ucsc.edu/~anlin/test# (我目前只是在 map 的 png 和鼠标悬停时建筑物移动的 gif 之间切换)

我怎样才能做到这一点,我应该使用纯 html/js 以外的东西来做到这一点吗?

谢谢!

最佳答案

svg 可能会帮助您。你可以用 svg 做一些很棒的互动。同时,您还可以使用css 来制作精美的动画。这实际上取决于您的需求。

检查一下:https://medium.freecodecamp.org/a-guide-to-svg-on-web-c5932dadca03

一些例子: https://codepen.io/search/pens/?q=svg%20animations&limit=all&order=popularity&depth=everything&show_forks=false

关于javascript - 如何在不失去可扩展性的情况下为网页(HTML/JS)制作动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46186220/

相关文章:

jquery - 为什么Ruby ERB和jQuery使用正则表达式解析HTML?

html - 并非所有 CSS 样式类的属性都适用

css - font-face src 中格式的可能值是什么?

鼠标离开时的 CSS 反向动画

javascript - 使背景颜色过渡不褪色并悬停特定时间以单击元素

JavaScript 图像 slider 在每个浏览器上的作用不同

javascript - UI-Select2 从下拉列表中删除选项?

javascript - jquery .click() 事件问题(django)

java - 正则表达式从文件中获取所有 ".js"和 ".css"href 链接

javascript - 如何更改 div 背景颜色并在加载新页面后保持高亮显示?