Miss.DMH的名片|「青训营 X 码上掘金」主题创作

用户7237901388106
137 阅读1分钟

当青训营遇上码上掘金。

前言

最近沉迷《哈利·波特》，里面哈利、赫敏、罗恩这三小只间的友情让我非常羡慕。刚好这次「青训营 X 码上掘金」主题创作活动的其中一个主题就是“我的名片”。每个人都应该有陪伴自己的好朋友，无论是舞台上还是舞台下。于是我想做一个舞台幕布开合的名片。原理并不难，利用polygon弄出幕布的形状，再配上开合幕布的动画效果。

《哈利·波特》简介如下：

《哈利·波特》是英国作家J·K·罗琳的魔幻文学系列小说，共7集，其中前六部以霍格沃茨魔法学校为主要舞台，描写的是主人公哈利·波特在霍格沃茨魔法学校六年的学习生活和冒险故事。第七本描写的是哈利·波特在校外寻找魂器并消灭伏地魔的故事。

主题：我的名片

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

介绍

最近报名了字节青训营，看到有个主题创作活动“我的名片”挺有意思的，正好复习下之前学过的html和css。名片整体采用比较小清新的设计风格，使用了HTML+CSS来编写。

演示效果图

截图

  • 幕布关上时 image.png
  • 幕布打开时 image.png

思路

  • 设置字体的样式
  • 设置剪影的样式
  • 设置动画

代码实现

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>MissDMH's card</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            background-color:darkolivegreen;
        }

        .a {
            position: relative;
            top: 100px;
            width: 1000px;
            height: 600px;
            border: 10px solid white;
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F07%2F20200307141844_chran.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1677399228&t=87cec2319d5b48f0034d5288d1fbbc61");
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .b,
        .c,
        .d,
        .e {
            position: absolute;
            width: 500px;
            height: 600px;
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F07%2F20200307141844_chran.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1677399228&t=87cec2319d5b48f0034d5288d1fbbc61");
            background-color: rgb(15, 15, 13);
            filter: drop-shadow(4px 4px 12px rgb(0, 0, 0));
            background-size: cover;
            opacity: .6;
            transition: 1.5s;
        }

        .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;
        }

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

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

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

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


        .f {
            opacity: 0;
            font: 900 50px '';
            letter-spacing: 10px;
            color: white;
            transition: 1.5s;
        }

        .a:hover .f {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
        <div class="e"></div>
        <p class="f">Miss.DMH</p>
    </div>
</body>
</html>
avatar
文章
阅读
粉丝