css 点击效果_用CSS画一个哆啦A梦

一段时间我用CSS完成了一幅哆啦A梦，现在和大家分享一下我的大致制作流程。
如果不可以忍受文章因为编辑器导致的布局错乱，可以点击我的原文：https://www.yuque.com/u548790/opuses/queiga

前言

页面查看请点击：

哆啦A梦吧

（进入后记住点击播放）
代码库查看请点击：github仓库地址 （里面有详细的使用说明）

制作过程：

1. 选择一张图片
2. 使用网格法进行绘制
3. 加入动画效果
4. 文件放入服务器里供起来

网格法画图

网格法画图是我借鉴彩铅的一种画法，目的是尽量让自己的图和原图更加接近。
原理：将原图和自己的html页面都加上同等大小正方形网格，自己实践时，尽量让自己的线条符合原图内的每个方框内线条的走势，从而提高图形的准确度（如下）。

具体椭圆、曲线条怎么实现的可以下载代码，或者直接去我的站点打开F12看，我也会另外写文章总结几个使用率很高、功能很强大的CSS属性，这里暂不讨论。
页面查看请点击：用CSS画一个哆啦A梦-链接（进入后记住点击播放）
代码库查看请点击：github仓库地址 （里面有详细的使用说明）

加入动画效果

实现效果：代码显示后一点一点绘制图（如上gif图）。实现原理：使用JavaScript。实现步骤：

1. 将实现哆啦A梦的CSS样式作为string，放入一个单独的文件或者赋值给一个变量进行管理；

1. 在index.html内插入一个有class名的style标签（styleDom）

1. 使用setInterval和styleDom.innerHTML一点一点将内容塞给2中的style标签

服务器上修改nginx配置

需求：我希望在与博客同一个端口80只是不同的路径来展示我的html页面实现：在之前的nginx server 80配置基础上加入新的location

location /doraemon {   alias /home/opuses/myDoraemon;   index index.html; } 

修改后先检查nginx配置是否修改成功，然后重启nginx。
完成！
参考文章：解决Nginx的location中root与alias区别——配置找不到路径的原因

---

如果你完全不懂怎么使用nginx，可以看我的另外几篇文章：
从零使用nginx搭建静态web服务器
从零看nginx的最基础配置