实现思路
- 在绘制动态风格之前，需要先单独创建一个文件让皮卡丘能正常被绘制，主要用到的是html代码和css代码
- 绘制动态风格时，需要用到
定时器，定时器让绘制过程是可以动态展示的。- 将CSS代码预设为字符串1，然后创建一个新的字符串2，把字符串1的每一个字一点点切下来放进字符串2
- 为了代码层可以自动滚动，以及保持样式美观，需要隐藏scrollbar，并且要用js去控制让scrollTop始终拉到底
遇到的难点
- 其中用到了dom操作元素的文本内容，即innerHTML与innerText，因此我们需要对innerHTML与innerText有深入了解
- 不然会出现，屏幕上动态显示的文本信息与源css代码的版式差异，比如没有空格和换行
innerHTML VS innerText
// 文本中的空格和转义符号都会被浏览器读到，但是具体如何展示的，这是听浏览器的，
// 浏览器会把html页面中多个手打的空格都给整理成1个
// 浏览器读到你这个是innerText字符串时，如果字符串里有tag
// 不会帮你把tag解析出来，会把多个手打的空格都给整理成1个
// 但是浏览器会帮你保留innerText字符串中的换行，你有多个换行它就展示多个换行，
// 浏览器读到你这个是innerHTML字符串时，会帮你把tag解析出来，也会把转义字符正确打印，
// 有多少个 就会生效多少个空格，但依旧会把多个手打的空格都给整理成1个
// 如果innerHTML中出现一个换行符号，则展示为一个空格，
// 如果innerHTML中出现多个换行符号，则展示为一个空格
技术总结
css reset 伪元素
- 伪元素请单独reset 不要和 * 混在一起
- 最好不要::before ::after混在一起一并reset
border-radius学得好可以绘制很多弧状图形
- 这里祭出个最有用的网址 9elements.github.io/fancy-borde…
- border-radius 50% 即可得到圆形
定位技巧不像公式那样死板
- 通常我们背的是父元素相对定位，子元素绝对定位，太死板了
- 只需要记住两点 relative是自己相较于父元素位置的偏差~
- 若要给子元素设置absolute，则父元素既可以是relative也可以是absolute
如何用div+border绘制三角形，梯形
元素与屏幕中线居中对齐的两种方式
- 定位+left50%+translateX(-50%)
- 定位+left50%+负的margin-left
- 如果你要调整位置，就自己修改translateX与margin-left的值就行了
transform 的坑点是会用后面新的将前面旧的全部替换掉,而margin-left则需要去计算div的宽度了，复杂情况很容易算错的
伪元素可以实现图形中再套一个图形
- 当然不用伪元素也是完全没问题的
.eye::before {
/*伪元素默认是内连元素，要宽高就要设置block*/
content: "";
display: block;
}
overflow:hidden
- 层级结构发杂的情况下，z-index不方便设置/设置无效时，可以试试在父元素设置overflow:hidden
