当青训营遇上码上掘金,让我们用代码来介绍一下自己。
效果展示
名片主要是一个静态的小卡片，然后在此基础上加入了点击事件和鼠标侦听事件，以此来实现放置的波纹效果。灵感主要来源于一些平时观察到的创意和效果，再加上我那不多的艺术细胞(jun)。
代码解构
布局分析
首先是布局，最外层容器采用flex弹性布局，然后设置align-items: center;justify-content: center;可以轻易做到内容在大盒子上下左右居中。对于被分割线分开的子元素，左边是一张图片仅此而已。右边则是一个盒子包着四个同类的子元素item。右边外层的盒子同样使用flex弹性布局，但要设置主轴为纵向的轴flex-direction: column;，当然也可以用列表来轻松实现这个布局效果。
动效分析
1.分割线：
对于分割线，我们可以使用一个单独的块级元素来做，只需要让它定位到一定位置然后设置hover样式就行。而更高级一点的做法是使用伪类来做这个效果。首先在右边的外层盒子上使用position:relative，让伪类根据它来定位，其次设置content:""这是伪类出现的必选项。然后就可以设置其他样式了。
2.页面跳转：
简单的绑定事件我们可以使用dom2级事件来实现，node.addEventListener('click',function),然后在方法体里面设置location和href属性就可以达到效果，同样用a标签也可以达到这样的效果。跳转页面没有跳转到github请大家忽略，在代码片段里该网站拒绝访问，于是我放上了掘金首页的地址。
3.悬浮事件：
悬浮的波纹同样使用伪类实现，让其他子元素(不包含card盒子，因为是它的伪类)的z-index比伪类大就行。然后在脚本里要给card绑定mouseover的侦听事件。在鼠标悬浮在card盒子上时设置两个css变量(带--前缀的变量,eg:--xPos)的值，这个值被绑定在css样式里面从而控制伪类的位置。
