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

前言

当青训营遇上码上掘金 - 主题一：我的名片。

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

由于我个人非常喜欢懒羊羊，像极了现实中的我，不是最聪明的，不是最健壮的，不是最好看的，学习一般，身材略胖，喜欢睡觉。

懒羊羊是动画片系列《喜羊羊与灰太狼》及其衍生作品中的正面角色。

青青草原上可爱的小肥羊，同时也是最懒惰的小羊，因此被灰太狼称为小胖子。“懒”字已经诠释了他的特点：不爱运动，平时表现非常差劲。总是一副游手好闲的样子。贪吃；一旦闻到食物的香味，马上会被吸引过去，总是因为贪吃而闯祸。一闻到食物的香味，跑得很快。

实现效果

点击+可看详细信息

基本实现思路

1. 将卡片分为上下两个盒子，顶部盒子分为图片区域和个人文本详情区域（当顶部高度减少时，文本详情就也会随之显示），底部区域分为个人信息区域和切换按钮。
2. 为了实现点击按钮后顶部向上移动和底部向下移动效果，通过给父元素设置flex布局,flex-direction: column;，justify-content: space-between;的方法实现。
3. 切换按钮在添加按钮和移除按钮之前通过display: none和display：block进行来回切换。

具体实现过程

HTML基本结构

        <div class="card-up">
            <div class="pic">
                <img src="" alt="">
                <div class="pic-text">
                    <span class="name">姓名</span>
                    <span class="age">学校</span>
                </div>
            </div>
            <div class="text">
                <div class="inner">
                    <h4>标题一</h4>
                    <p>。
                    </p>
                    <h4>标题二</h4>
                    <p>
                        
                    </p>
                </div>
            </div>
        </div>
        <div class="card-down">
            <div class="change">
                <!-- 添加 -->
                <div class="add-icon">
                    
                </div>
                <!-- 移除 -->
                <div class="remove-icon">
                    
                </div>
            </div>
            <div class="info">
                <div class="left item">
                    <div class="top">年 龄</div>
                    <div class="bottom">11岁</div>
                </div>
                <div class="center item">
                    <div class="top">英文名</div>
                    <div class="bottom">Lazy sheep</div>
                </div>
                <div class="right item">
                    <div class="top">血 型</div>
                    <div class="bottom">A型</div>
                </div>
            </div>
        </div>

CSS样式部分

鼠标移入图片缩放效果

    .pic:hover img {
            transform: scale(1.05);
        }

为了达到当上面宽度减小时，让图片保留原始比例可以设置该属性

        .pic img {
            position: absolute;
            /* 当上面宽度减小时，让图片保留原始比例 */
            object-fit: cover;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            transition: all 0.5s ease;
        }

当卡片底部高度降低时，设置了阴影部分

        .card-down.active {
            height: 60px;
            box-shadow: 0 -2px 10px 1px rgba(0, 0, 0, .3);
        }

底部区域的个人信息是通过flex布局实现的

        .info {
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 12px;
        }