主题创作：我的名片

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

很高兴参加这次的码上掘金活动.看见推荐前端的两个活动时,我毫不犹疑的选择了写名片这个活动(主要是这个比较简单(^▽^))。

作品

• 由于不会做gif,所以就放了两张静态的图片┭┮﹏┭┮

思路

由于之前学过HTML和CSS,就简单写了一个带有一些新动态效果的名片

HTML部分

名片主要分为三个区域——图片区域（top）、内容区（boxBottom1）、简介区域（boxBottom2）

        <div class="top">
            <div class="image"></div>
        </div>
        <div class="boxBottom1">
            <h2>Visiting Card</h2>
            <span>自我介绍</span>
        </div>
        <div class="boxBottom2">
            <ul>
                <li>爱好: 吃喝玩乐</li>
                <li>QQ:XXXXXXX</li>
                <li>GitHub:xxxxx</li>
                <li>性别:♂</li>
            </ul>
        </div>
    </div>

CSS部分

• 上半部分划分出来,开启相对定位,让后面两部分相对于上半部分来布局
• 之后通过伪类来实现一个倒三角的装饰

        .wrap{
            position: relative;
            width: 330px;
            height: 260px;
            background-color: rgb(255, 255, 255);
            overflow: hidden;
            box-shadow: 0 0 10px rgb(0, 0, 0, .5);
            border-radius: 0 0 30px 30px;
        }
        /* 上部分块的 */
        .top{
            display: flex;
            position: relative;
            width: 330px;
            height: 130px;
            background-color: rgb(100, 210, 200);
            justify-content: center;
            transition: .5s;
        }
        /* 上部分添加一个下面的三角形 */
        .top::after{
            content: '';
            width: 40px;
            height: 40px;
            clip-path: polygon(50% 40%,0 0, 100% 0);
            background-color: rgb(100, 210, 200);
            position: absolute;
            left: 170px;
            bottom: -40px;
            transform: translate(-50%);
            z-index: 999;
        }



        .image{
            position: absolute;
            width: 90px;
            height: 90px;
            top: 20px;
            background-image: url();
            background-size: cover;
            transition: .5s;
        }

• 下半部分呢就通过绝对定位,把他固定在上半部分下面(因为上半部分开启相对定位脱离了文档流,所以下半部分我开了绝对定位使他相对于上半部分进行布局)
• 然后再bottom1的h2后面通过伪类来和span分割

.boxBottom1,.boxBottom2{
            position: absolute;
            width: 330px;
            height: 130px;
            top: 130px;
            text-align: center;
            transition: .5s;
        }
        .boxBottom1 h2{
            display: block;
            margin: 30px 0 10px 0;
            font: 800 28px ;
        }
        .boxBottom1 span{
            font: 400 14px ;
        }
        .boxBottom1 h2::after{
            content: '';
            display: block;
            width: 200px;
            height: 2px;
            background-color: black;
            position: absolute;
            left: 50%;
            transform: translate(-50%,4px);   
        }
        /* --------------------------------- */
        /* boxBottom2 */
        .boxBottom2 {
            top: 330px;
            height: 220px;
        }
        .boxBottom2 li{
            margin: 25px;
            font: 1000 20px;
            transition: .2s;
        }

• 最后通过transform和:hover来实现动态效果

/* 鼠标移入效果:hover */
        .wrap:hover .top{
            height: 50px;
        }
        .wrap:hover .boxBottom1{
            top: 300px;
        }
        .wrap:hover .boxBottom2{
            top: 50px;
        }
        
        .wrap:hover .image{
            width: 35px;
            height: 35px;
            border-width: 3px;
            transform: translate(-140px,-15px);
        }
        .boxBottom2 li:hover{
            color: gold;
        }

总结

这次活动让我重新复习了一下html和css,希望在以后,能做出效果更加炫酷的页面!