名片介绍

相比传统纸质名片，数字名片绿色环保，可以自由修改，随意更新，方便保存~

由于名片的主要用途在于自我介绍，因此主界面做得相对简洁明了，关键信息一目了然。其次除了自我介绍部分，还添加了两个扩展卡片用于介绍自己的人际关系（家人、朋友...）或者兴趣爱好等，可以自行添加。

以本名片为例，阿尼亚是一名能对他人进行读心的超能力少女，在就读伊甸学院的时候就可以使用数字名片向别人介绍自己，同时也能向其他小朋友及父母介绍自己的间谍爸杀手妈，介绍内容可自己随意更改定制，如果想保持神秘感也可以隐藏职业信息和超能力≖‿≖✧

代码结构与实现

HTML

<div class="all">
        <div class="card active"
            style="background-image: url('https://img1.imgtp.com/2023/02/14/9owNz4rS.png')">
            <ul>
                <li>姓&emsp;名：阿尼亚·福杰</li>
            </ul>
        </div>
        <div class="card"
            style="background-image: url('https://img1.imgtp.com/2023/02/14/5Oehw4sR.png')">
            <ul>
                <li>姓&emsp名：约尔·福杰</li>
            </ul>
        </div>
        <div class="card"
            style="background-image: url('https://img1.imgtp.com/2023/02/14/mfW8mg7j.png')">
            <ul>
                <li>姓&emsp名：劳埃德·福杰</li>
            </ul>
        </div>
</div>

该布局主要是在一个大盒子里面摆放3个小盒子，使用backgropund-image以达到点击后图片逐渐展开的交互效果，而背景图片则是通过在线图床工具ImgTP - 免费公共图床上传到码上掘金平台

CSS

.card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    flex: 0.5;
    margin: 10px;
    position: relative;
    -webkit-transition: all 800ms ease-in-out;
}

.card ul {
    list-style: none;
    font-size: 36px;
    font-weight: 700;
    position: absolute;
    top: 20px;
    left: 20px;
    margin: 0;
    opacity: 0;
}

.card.active {
    flex: 2;
}


.card.active ul {
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
}

该名片主要使用flex布局，名片的介绍文字主要是通过子绝父相来定位，隐藏元素主要是通过opacity属性值设置为0使得透明度为100%隐藏，但是占据空间，并且会被子元素继承，因此后续通过设置opacity:1;来取消隐藏。

JS

const cards = document.querySelectorAll('.card')

cards.forEach(card => {
    card.addEventListener('click', () => {
        removeActiveClasses()
        card.classList.add('active')
    })
})

function removeActiveClasses() {
    cards.forEach(card => {
        card.classList.remove('active')
    })
}

使用forEach()方法调用数组的每个元素，通过把点击的元素添加类active，其余元素去除active来达到选中元素的目的，即pink老师所说的排他法。

总结

本人纯小白，此次做的名片主要使用HTML+CSS+js，恰好是前段时间才学习过的，也算是学以致用，但是实现效果暂时还比较单一，希望能通过后续学习继续完善该名片，有不足之处还烦请各位大佬指教。

「青训营 X 码上掘金」| 我的名片

名片介绍

代码结构与实现

HTML

CSS

JS

总结