My Card

当青训营遇上码上掘金

主题：我的名片

页面的背景色采用渐变色代码如下：

    background-image: linear-gradient(to bottom,rgb(237,241,246),rgb(210,219,233),rgb(206,216,231));

页面布局采用定位和弹性布局，具体的CSS的代码如下：

            position: relative;
            top: 100px;
            width: 1000px;
            height: 600px;
            border: 10px solid white;
            background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.391ce5016ee90bceda2101dac57d54a1?rik=XU%2bYgGlGlmoz%2bQ&riu=http%3a%2f%2fwww.98ps.com%2fuploads%2fallimg%2fc130507%2f13C91L3b10-15V63.jpg&ehk=UiqCIUaWb4PMvDGAIJoHTtZANmWC87qY7U2vGASXmOs%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1");
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
           left: 250px;

图片引用网站上的图片：

     background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.391ce5016ee90bceda2101dac57d54a1?rik=XU%2bYgGlGlmoz%2bQ&riu=http%3a%2f%2fwww.98ps.com%2fuploads%2fallimg%2fc130507%2f13C91L3b10-15V63.jpg&ehk=UiqCIUaWb4PMvDGAIJoHTtZANmWC87qY7U2vGASXmOs%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1");

阴影效果的实现，CSS代码如下：

    filter: drop-shadow(4px 4px 12px rgb(0, 0, 0));

淡入和淡出效果采用opacity和transition共同完成：

            position: absolute;
            width: 500px;
            height: 600px;
            background-image: url("./th.jpg");
            background-color: rgb(15, 15, 13);
            filter: drop-shadow(4px 4px 12px rgb(0, 0, 0));
            background-size: cover;
            opacity: .6;
            transition: 1.5s;

触碰效果采用伪类元素hover进行完善：

    .a:hover .b {
            left: -200px;
        }

        .a:hover .c {
            left: -150px;
        }

        .a:hover .d {
            right: -140px;
        }

        .a:hover .e {
            right: -220px;
        }

        .a:hover div {
            opacity: 1;
        }

两个交叉形状的实现，具体代码如下：

    .b {
            left: 0;
            clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 65% 0%);
            background-position: -100px 0;
        }

        .c {
            left: 0;
            clip-path: polygon(0% 0%, 0% 100%, 70% 100%, 90% 0%);
            background-position: -100px 0;
        }

        .d {
            right: 0;
            clip-path: polygon(0% 0%, 40% 100%, 100% 100%, 100% 0%);
            background-position: 800px 0;
        }

        .e {
            right: 0;
            clip-path: polygon(20% 0%, 0% 100%, 100% 100%, 100% 0%);
            background-position: 800px 0;
        }