当青训营遇上码上掘金 | 我的名片

当青训营遇上码上掘金

很高兴能够入营第五届字节跳动青训营，在本次「青训营 X 码上掘金」主题创作活动入营版中，我选择了 主题 1：我的名片 作为代码创作主题。

写在前面

灵感是来源于前端侦探的这篇文章CSS 如何让auto height完美支持过渡动画？（大家也可以去看看，可以学到挺多东西的）,他用简单的gird属性实现了一个auto height的过渡动画，于是自己也想尝试用gird的属性来实现自己名片的高度变化效果，但是在真正使用了它文章提到的

.grid { 
    display: grid;
    grid-template-rows: 0fr; 
    transition: .3s; overflow: hidden; 
} 
.grid>div { 
    min-height: 0; 
} 
.wrap:hover .grid { 
    grid-template-rows: 1fr; 
}

的方法时，才发现如果我的名片有设置固定的高度，而不是全自适应高度时，他的方法是不生效的，所以最后没办法用他的方法实现我的名片高度变化效果。而是还是选用了transform:scale()来实现效果。

相关用到的知识点

display: grid; place-items: center;可以快速实现单个盒子的水平处置居中布局 aniation里的 alternate-reverse动画属性 可以设置动画来回播放(方向开始) gird里的fr单位可以定义网格轨道大小的弹性系数，有点类似flex:1这样的flex布局里的定义盒子占比份额。 如果只想高度由中间向上下展开可以用 transform: scaleY();来实现，且该属性可以设置负值，实现盒子反转效果。 如果定义background-color的颜色且想有透明效果，其实可以不用opcity，而是直接定义颜色的时候用rgba(,,,)的第四个参数来定义透明度。 鼠标触摸图标:hover动画失效可以用 animation:none取消

我的简单个人名片

最后希望可以通过后续在青训营中的学习掌握更多知识和技能，给这张名片的设计添加一些丰富内容，变得更炫酷些！

名片可能有点简单,希望可以通过青训营中的学习掌握更多知识和技能，让这个名片有2.0,3.0，成为真的独一无二我自己的名片。