电子名片 |「青训营 X 码上掘金」主题创作

当青训营遇上码上掘金。

主题： 我的名片

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。

创作灵感

在生活中，经常会有来自不同领域，不同平台的朋友请求添加好友，因此，需要经常回复或发送自己的简介或个人名片。只要有了个人电子名片，就会方便许多。只需要将链接发送过去即可。

演示

实现

首先，使用body或者<div id="app"></app>作为盒子。然后在内部放置一个<div class="card"></div>的元素作为卡片。 卡片使用flex布局，左侧为头像右边为文字。 上方姓名，下方个人介绍。 使用border-radius属性添加圆角 使用@keyframes属性添加动画

代码

HTML

<div id="app">
        <div class="card">
            <div class="left">
                <div class="avatar">
                    <img src="https://p3-passport.byteimg.com/img/mosaic-legacy/3797/2889309425~100x100.awebp"
                        alt="avatar">
                </div>
            </div>
            <div class="right">
                <div class="username" id="title1">姓名：&nbsp;<strong>小帅</strong></div>
                <div class="info" id="title2">
                    个人介绍：&nbsp;<strong>注意看，这个男人叫小帅。时间带走了一切,唯独留下了我,疼痛本身对主要的肥胖精英很重要。没有快乐和痛苦的快乐，是不是像一个聪明的建筑师一样被最小的事情蒙蔽了去实现伟大的理性呢?</strong>
                </div>
            </div>
        </div>
    </div>

CSS

* {
    padding: 0;
    margin: 0;
}
#app {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.card {
    display: flex;
    width: 400px;
    height: 200px;
    background-color: #eaf2ff;
    border-radius: .5em;
}

.card .left,
.right {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card .left {
    justify-content: center;
    align-items: center;
    flex: 1;
}

.card .left .avatar img {
    transition: all 1s;
    border-radius: 50%;
}

.card .left .avatar img:hover {
    transform: rotate(360deg);
}

.card .right {
    flex: 2;
    justify-content: center;
}

.card .right .username {
    margin-bottom: .5em;
}

.card .right .info {
    margin-top: .5em;
}

.username,
.info {
    text-align: center;
}

.username {
    color: #9966FF;
    font-size: 26px;
    font-weight: bolder;
    animation: fontfilter 2s infinite;
}

@keyframes fontfilter {

    0% {
        opacity: 0.5;
        font-size: 16px;
    }

    50% {
        opacity: 1;
        font-size: 30px;

    }

    100% {
        opacity: 0.5;
        font-size: 16px;
    }

}

写在最后

加油💪！奥力给