构想
- 希望实现一个会动的可爱卡通人物。(CSS动画)
- 代码和效果图同时展现。(JS)
效果链接
第一步,简易动画
mickeyxiahuijun.top
第二步,滚动代码与动画同时展示
遇见的问题
第一个问题
点击不了按钮等现象
原因:css里使用了z-index调整上下层的位置,所以会影响到浏览器渲染的各个部分。点击不了按钮说明有其他的东西在按钮的上面,覆盖住了按钮。
措施:查看各个部分的z-index,看看有没有覆盖住按钮的。或者直接简单粗暴的将按钮的z-index调至很大。
第二个问题
上传至远程仓库后,原代码的效果出现问题了,(我这是test.html里有style标签)test.html内标签的CSS样式没有效果。
原因:放置在body标签下的style标签被删除了。我之前用的是parcel上传到远程仓库的,所以可能是工具自动帮我删除了。
措施:将style标签抽离成css文件,html里link引入该文件。
第三个问题
在解决了第二个问题之后,第三个问题又出现了。
test.e98b79dd.js:1 Failed to load resource: the server responded with a status of 404 ()
原因:说明浏览器找不到这个js文件,这里以Chrome浏览器为例,点进network查看一下访问路径,会发现是错的。
措施:
第一步
parcel build src/test.html /*测试文件的文件名*/ --public-url fuck
第二步,打开该文件,看fuck出现在哪里,我们就需要改哪里
parcel build src/test.html --public-url .
第三步,改完重新上传到github上面,这里需要注意的是,不要着急,可能要过一会才生效。所以,需要等一会再重新打开链接。
收获
- 从确立动画人物,到简易实现,再逐步完善,中间不断的生成bug,再修复bug。我觉得代码真的很神奇,有一种“给我一台电脑,我能创造世界”的感觉。
- 本项目运用了大量的CSS和JS,让我更加深刻理解了他们。
- 在完成项目的过程中,不断优化代码,逐步实现模化块。
本文章第一次发布于语雀
【项目】会动的米老鼠 · 语雀www.yuque.com