个人名片想法当青训营遇上码上掘金我首先想到的是黑客帝国般的代码流动或者是警告封锁条，可以参考崩坏三游戏进场动画的那个，

当青训营遇上码上掘金

个人名片。。。在第一眼看到这个题目时，还是没有什么想法的，我的个人名片应该是脱离不了卡片的范畴，对于卡片本身，我是不会设计，所以我决定从背景方面入手。

创作思路

我首先想到的是黑客代码流动或者是警告封锁条（参考崩坏三游戏进场动画），随即想到滚动条上内容会很影响卡片主题，于是先果断放弃。然后就想到，古时皇帝颁发圣旨那个场面还行吧，于是就先做试着做了个场景（一个卷轴向两边展开，然后向后转一定角度，最后在平移到页面底部）。

这些完成后我又设想到个人介绍会作为一张卡片悬浮在“圣旨”上空，但是我发现自己在这儿做的很烂，我就是单纯吧开片上下浮动，动画很生硬。于是就删除了，就是悬在那，啥都不动。

如果只是简单做到上述还是不够，背景太纯了，还不够炫丽，就在脑海里想自己见到过较为震撼的场景，嗯嗯嗯。。。老头环里的黄金树。在查询多方面后，我决定使用canvas，和我只学过一点的python里的海龟画图比较像吧。

既然有了树，那么自然可以联想到樱花飘落的唯美场景了，我也要做一个！

直接从网上找的一张图片，手动将卷轴两侧的圆柱滚轴与中间的矩形画布区域分开，开始时画布区域宽度缩小，两个滚轴也放到中间，样式全部设置为绝对定位，使用left和top设置位置，页面一加载，左侧滚轴的left变小，右侧滚轴left变大，画布宽度变大，就简单实现卷轴展开的效果了

问题1：卷轴两侧的圆筒显得扁平生硬，动画也不丝滑问题2：卷轴位置、大小固定，只有在自己电脑全屏下才正常显示位置

还是使用动画对transform的translate和rotate进行改变

要画树，新建一个树的对象吧，树上面有啥呢，有树枝树干叶子，树干不就是粗一点的树枝嘛，那叶子和树枝不是只有一个呀，所以还需要建立树枝和叶子两个对象。那么目标就很明确了，画树枝，画叶子。

树枝应该怎样画呢，canvas除了可以直接画出矩形，还可以画圆，如果是长方形，会显得很生硬（太直了），所以我采取画圆。把一个圆相对于上一个圆圆心稍作改动，很多个叠加后不就好了

树不都是从一条枝干，然后分成不同枝条，每个枝条再分吗，所以就需要给新建的树枝一个标志，表明他是第几代。

树叶我也用圆来表示了，为了简单省事，我直接在随后一代树枝末尾加上叶子，其他地方都没加。

目前还是不会，我如果在原canvas上让叶子下落，原来叶子不会消失，就导致叶子下落轨迹出全被叶子遮盖了，如果擦除原来叶子所在位置的图像，又有可能导致数枝也被擦除。我又在一个新画布上专门展示，又出了个bug，树叶下坠里一点就不动了。。。。。

问题1：还没有

问题2：我只直接粗暴的使用了一堆css变量和@media进行细微的调节（太枯燥了，也不利于维护，但我没办法了），如果想看直接看源码。。。

真的是从一开始的没想法，到后来想法一个又一个，但是不会做。。还是希望慢慢把这个做好吧（不只是在这个活动内）