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

hasmokan
49 阅读2分钟

当青训营遇上码上掘金

我的代码网址：码上掘金x - 码上掘金 (juejin.cn)

我的灵感：

我的灵感来源于我父亲的名片，我父亲平时跟客户接触，少不了使用名片，在日常生活中，名片宣传自我：其实最主要的内容就是名片持有者的姓名、职业、工作单位、联络方式等。所以我们在设计互联网名片时，需要写明名片持有者的姓名、职业、工作单位、联络方式，同时结合我们程序员的身份，可以添加一些动效的东西来实现吸引人眼球的效果。

创作过程

第一步

制作一个普通的网页是实现一张好看华丽名片的前提。通过感叹号!+tab，我们可以生成一个快速的前端模板 记得修改title中的内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/c/font_3866912_6r2zachyvso.css"
    />
    <title>hasmokan的名片</title>
  </head>
  <body>
  </body>
</html>

第二步

然后我们需要一个容器 container 来装我们卡片的，我们用一个div盒子来装载我们的卡片，然后卡片内通过div嵌套来写卡片的正面，用h2来加粗我的名字，然后通过行元素span写出我的职业，然后通过无序列表ul来写出我的信息.

  <body>
    <div class="container">
      <div class="Affirmative">
        <h2>hasmokan</h2>
        <span>Web Engineer</span>
        <br /><br /><br />
        <ul class="list">
          <li><i class="iconfont icon-dianhua"></i>phone:123456789</li>
          <li><i class="iconfont icon-youxiang"></i>mail:123456778@qq.com</li>
          <li><i class="iconfont icon-dizhi"></i>China,Xi,an</li>
        </ul>
        <div class="sign">相信的心就是你的魔法</div>
      </div>
      <div class="back"></div>
    </div>
  </body>

第三步

添加icon给名片更加好看的样式，通过 alicdn 我分别给住址 电话 邮箱添加了icon

          <li><i class="iconfont icon-dianhua"></i>phone:123456789</li>
          <li><i class="iconfont icon-youxiang"></i>mail:123456778@qq.com</li>
          <li><i class="iconfont icon-dizhi"></i>China,Xi,an</li>

第四步

有了主页面，接下来我们就要添加样式了，以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。首先记得清除边距，并且通过hovor 和 rotateY transition的结合来实现卡片翻转的效果

* {
        margin: 0;
        padding: 0;
}

编写卡片的css

 * {
        margin: 0;
        padding: 0;
      }
      body {
        background-image: url(https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg);
      }
      .container {
        font-size: 20px;
        position: absolute;
        width: 800px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .Affirmative {
        background-color: aliceblue;
        opacity: 0.1;
        transform: rotateY(180deg);
        height: 350px;
        padding: 80px;
        transition: 1s;
      }

      .list {
        list-style-type: disc;
      }
      .Affirmative:hover {
        opacity: 1;
        transform: rotateY(0);
        transition: 1s;
      }
      span {
        color: white;
        background-color: rgb(8, 141, 141);
      }
      li {
        border-radius: 5%;
        width: 280px;
        background: wheat;
        opacity: 0.5;
        margin-bottom: 5px;
      }
      .sign {
        margin-top: 180px;
      }

最后

通过伪元素 before 和 after 我添加了两条竖线，达到简洁的修饰效果，符合名片快速介绍自己的作用

      .Affirmative::after {
        content: "";
        width: 10px;
        height: 510px;
        background: #34495e;
        position: absolute;
        left: 760px;
        bottom: 0px;
      }
      .Affirmative::before {
        content: "";
        background: #34495e;
        position: absolute;
        width: 800px;
        height: 10px;
        top: 10px;
        right: 0px;
      }
avatar
文章
阅读
粉丝