当青训营遇上码上掘金 | 我的名片

叽歪怒的快乐
119 阅读4分钟

当青训营遇上码上掘金

前言

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。今天来带大家看一下我的个人名片吧！

效果

google-chrome-2023-01-26-16-43-14.gif

体验地址

代码是在码上掘金平台写的

code.juejin.cn/pen/7192849…

设计思路

HTML

首先编写HTML部分,先给个大盒子box用来装所有内容，然后定义一个box-top盒子来存放头像的头部样式，接着定义一个box-bottom盒子存放鼠标移动前文字的内容，和box-bottom2盒子存放鼠标移动后显示的文字内容。其中ul是定义无序列表的样式，li是列表内行的样式,h2二级标题，span标签是用来组合文档中的行内元素。

<div class="body">
    <div class="box">
    <div class="box-top">
        <div class="image"></div>
    </div>
    <div class="box-bottom">
      <h2>码上掘金</h2>
      <span>主题创作 - 我的名片</span>
</div>
<div class="box-bottom2">
    <ul>
        <li>name:kakaoo</li>
        <li>QQ:603180664</li>
        <li>Email：603180664@qq.com</li>
        <li>Age:xx</li>
    </ul>
</div>
</div>
</div>

CSS

接下来是css部分，先用*清空所有样式，然后给元素最外层的盒子也就是body采用flex布局，让它的所有子元素自动成为容器成员，之后使盒子居中，位于网页中间。

*{
  margin: 0;
  padding: 0;
  list-style: none;
}
.body{
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

卡片样式

之后我们开始设置卡片的样式，首先设置卡片外形，定义宽度和高度和背景颜色，然后用box-shadow给卡片一个阴影效果和border-radius设置圆角样式，其中overflow：hidden是为了实现之后文字变化的动画效果。接着设置盒子头部、头像、盒子下部的样式，其中transition是过渡，使后面的动画效果更丝滑。:after 选择器向选定元素的最后子元素后面插入内容，也就是说在h2标签后添加内容即黑色的下划线。

.box{
  position: relative;
  width: 330px;
  height: 260px;
  background-color: antiquewhite;
  box-shadow: 0 0 10px rgb(0, 0, 0,.5);
  overflow: hidden;
  border-radius: 15px
}
.box-top{
  position: relative;
  width: 330px;
  height: 130px;
  background-color: rgb(205, 235, 235);
  display: flex;
  justify-content: center;
  transition:.5s;
}
.image{
  position: absolute;
  top: 20px;
  width: 90px;
  height: 90px;
  background-color: rgb(244, 244, 244);
  border-radius: 50%;
  transition: .5s;
}
.box-bottom,.box-bottom2{
  position: absolute;
  top: 130px;
  width: 330px;
  height: 130px;
  text-align: center;
  transition: .5s;
}
.box-bottom h2{
  display: block;
  margin: 30px 0 10px 0;
  font-size: 28px;
  font-weight: 600;
}
.box-bottom span{
  font-size: 20px;
  font-weight: 400;
}
.box-bottom h2::after{
  content: '';
  display: block;
  width: 200px;
  height: 2px;
  background-color: rgb(31, 30, 30);
  position: absolute;
  left: 50%;
  transform: translate(-50%,4px);
}
.box-bottom2{
  top: 300px;
  height: 220px;
 }
.box-bottom2 li{
  margin: 23px;
  font-size: 18px;
  transition: .2s;
}

鼠标移入效果

我们使用:hover选择器实现鼠标移入的效果，因为:hover在鼠标移到链接上时可以添加的特殊样式。那我们就给卡片的大盒子box添加:hover，改变盒子顶部、头像和盒子下部的样式，具体代码如下。

其中文字改变是如何实现的呢？我来解释一下，我们先给鼠标移入前的文字设置一个刚刚好出现在卡片上的top,然后给鼠标移入后出现的文字设置超过卡片高度即不能出现在卡片上的高度。因为我们前面给大盒子添加了一个overflow:hidden属性，那么超出卡片以外的文字都被隐藏了。接着修改:hover之后额样式，让鼠标移入后的文字高度刚刚好设置到卡片上，鼠标移入前的文字高度设置到卡片之外。就可以完美实现文字变换啦！

.box:hover .box-top{
  height: 50px;
}
.box:hover .image{
  width: 35px;
  height: 35px;
  transform: translate(-140px,-15px);
}
.box:hover .box-bottom{
  top: 300px;
}
.box:hover .box-bottom2{
  top: 50px;
}
li:hover{
  color: rgb(162, 185, 235);
}

最后

希望通过这次主题创作的过程，能让大家看到对于这个主题的不一样的看法和见解，如有错误，也希望大家可以及时纠正我的错误。

谢谢大家的观看哈！

avatar
文章
阅读
粉丝