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

realian
90 阅读7分钟

前言

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

设计思路

HTML

首先编写HTML部分,用card用来装开头展示的头像部分，然后定义一个imgbox盒子来存放翻转之后的左上部分头像的头部样式，接着定义一个imgboxblack盒子存放鼠标移动后文字的盒子，和blackcontent盒子存放鼠标移动后显示的文字内容。其中span标签是用来组合文档中的行内元素。

翻转之后的名片内容主页是包含自我宣言以及联系方式和所属地。

<div class="card">
  <div class="lefttop">
    <div class="imgbox">
      <div class="imgbox-top">
        <img src="https://p3-passport.byteimg.com/img/user-avatar/0c073c7461e294ef08f204e4018cb014~180x180.awebp">
      </div>     
      <div class="imgbox-bottom">
        <h2>ianzhang</h2>
        <span>我的名片 - 前端工程师</span>
      </div>
    </div>
    <div class="imgboxblack">
      <div class="blackcontent">
          <span class="word">青训营</span>
          <span class="x">X</span>
          <span class="word">码上掘金</span>
        </div>
    </div>
  
  </div>
  <div class="right">
     <div class="id">
       ianZhang
     </div>
     <div class="numberdetails">
       <div><p>Articles</p><span>4</span></div>
       <div><p>View</p><span>200</span></div>
       <div><p>Followers</p><span>0</span></div>
     </div>
     <div class="Btn">
        <button class="btnfollow">Follow</button>
        <button class="btnmore" onclick="jumpmore()">More</button>
      </div>
  </div>
  <div class="bottom">
    <h3>My Information</h3>
    <div>🎯&nbsp往事暗沉不可追，来日之路光明灿烂</div>
    <div>🏠️&nbsp中南财经政法大学</div>
    <div>📧&nbsp1870388817@qq.com</div>
  </div>
  <div class="theme">
    <button mode="light">☀️</button>
    <button mode="dark">🌙</button>
    <button mode="read">📖</button>
  </div>
  
</div>

CSS

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

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  min-height: 100vh;/* 设置height:100vh时，即使没有内容，也可以撑开百分百的高度 */
  justify-content: center;/*定义了项目在主轴上的对齐方式为居中 左右对齐*/
  align-items: center;/*项目在侧轴上的对齐方式为居中，上下对齐*/
  background-image: var(--background-image);/*线性渐变*/
}
.card{
  /* width: 200px; */
  /* height: 200px; */
  width: 330px;
  height: 235px;
  background-color: var(--background-color);
  border-radius: 20px;
  transition:0.5s ease-in-out;
  overflow: hidden;
  perspective: 1000px;
}
.card:hover{
  width: 640px;
  height: 400px;
}


.imgbox:hover .imgbox-top{
  width: 35px;
  height: 35px;
  transform: translate(-140px,-15px);
}
img,.blackcontent{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  box-shadow: var(--box-shadow);
  background-color: var(--imgback-color);
}
img{
  object-fit: cover;/*对图片保留原始比列，多余的会被裁剪,防止图片挤压变形*/
}
.imgbox,.imgboxblack{
  position: absolute;/*绝对定位，脱离文档流*/
  width: 330px;
  height: 200px;
  padding: 10px;
  background-color: var(--background-color);
  border-radius: 20px;
  backface-visibility: hidden;/*隐藏背面*/
  transition:  0.5s ease-in-out;/*transition: transition-property transition-duration transition-timing-function transition-delay;*/
}
.imgboxblack .blackcontent .word{
  vertical-align:middle;
  font-size: 1em;
  font-weight: 600;
  color: var(--imgbox-text-color);
}
.imgboxblack .blackcontent .x{
  vertical-align:middle;
  padding: 0px 5px;
  font-size: 1.5em;
  font-weight: 800;
  color: var(--imgbox-x-color);
  opacity: 0.5;
}
.imgbox-top{
  transform:  rotateY(0deg);
}
.imgboxblack{
  transform:  rotateY(-180deg);
}
.lefttop:hover .imgbox-top{
  transform:  rotateY(180deg);
}
.lefttop:hover .imgboxblack{
  transform: rotateY(0deg);
}
.card .right{
  position: relative;
  width: 320px;
  height: 200px;
  left: 330px;
  padding: 20px;
  text-align: center;
  background-color:var(--background-color);
  transition:  0.5s ease-in-out;
}

.card .right .id{
  font-size: 1.8em;
  line-height: 1.8em;
  font-weight: 600;
  color: var(--id-color);
}
.card .right .numberdetails{
  display: flex;
  justify-content:space-between;/*两端对齐，项目之间的间隔都相等*/
  background-color: var(--background-color);
  border-radius: 5px;
  margin-top: 5px;
  transition:  0.5s ease-in-out;
}
.card .right .numberdetails div{
  width: 80px;
  padding-top: 5px;
  background-color: var(--num-background-color);
  border-radius: 5px;
  font-size:0.85em;
  font-weight: 600;
  color:var(--num-text-color);
}
.card .right .numberdetails div p{
  opacity: 0.5;
}
.card .right .numberdetails div span{
  font-size: 1.2em;
  line-height: 1.8em;
  font-weight: 800;
  color: var(--num-color);
}
.card .right .Btn{
  display: flex;
  justify-content:center;
  margin-top: 10px;
}
.card .right .Btn button{
  padding: 10px 40px;
  margin: 0px 10px;
  border-radius: 5px;
  border:none;
  outline:none;/*去掉选中后的外边框*/
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
}
.card .right .Btn .btnfollow{
  background-color: var(--follow-background-color);
  color: var(--follow-text-color);
}
.card .right .Btn .btnmore{
  background-color: var(--more-background-color);
  color: var(--more-text-color);
}
.card .bottom{
  width: 600px;
  height: 115px;
  background-color: var(--information-background-color);
  border-radius: 10px;
  margin: 0 10px;
}
.card .bottom h3{
  padding: 5px 20px;
  color: var(--h3-color);
  font-size: 1em;
  line-height: 1.5em;
  font-weight: 600;
}
.card .bottom div{
  padding-left: 10px;
  font-size: 0.85em;
  font-weight: 400;
  line-height: 1.6em;
  color: var(--text-color);
}
.card .theme{
  margin: 0 auto;
  text-align: center;
}
.card .theme button{
  border-radius: 5px;
  border:none;
  outline:none;/*去掉选中后的外边框*/
  background-color:var(--button-color);
  cursor: pointer;
  transition:  0.5s ease-in-out;
}

.imgbox{
  position: relative;
  width: 330px;
  height: 235px;
  padding: 10px;
  background-color: antiquewhite;
  box-shadow: 0 0 10px rgb(0, 0, 0,.5);
  overflow: hidden;
  border-radius: 20px  
}

.imgbox:hover, .lefttop{
  width: 50px;
  height: 50px;
}

.imgbox-bottom{
  top: 300px;
}

.imgbox-top{
  /* position: relative; */
  /* width: 330px;
  height: 130px; */
  position: relative;/*绝对定位，脱离文档流*/
  width: 150px;
  height: 150px;
  left: 70px;
  /* background-color: rgb(244, 244, 244); */
  border-radius: 80%;
  padding: 10px;
  /* background-color: rgb(205, 235, 235); */
  background-color: var(--background-color);
  border-radius: 20px;
  /* backface-visibility: hidden;隐藏背面 */
  transition:  0.5s ease-in-out;/*transition: transition-property transition-duration transition-timing-function transition-delay;*/
  display: flex;
  justify-content: center;
  text-align: center;
}

.imgbox-bottom{
  position: absolute;
  top: 130px;
  width: 300px;
  height: 130px;
  text-align: center;
  transition: .5s;
}

.imgbox-bottom h2{
  display: block;
  margin: 30px 0 10px 0;
  font-size: 28px;
  font-weight: 600;
}
.imgbox-bottom span{
  font-size: 20px;
  font-weight: 400;
}

.imgbox-bottom h2::after{
  content: '';
  display: block;
  width: 200px;
  height: 2px;
  background-color: rgb(31, 30, 30);
  position: absolute;
  left: 50%;
  transform: translate(-50%,4px);
}

JavaScript

这一部分控制的是三个模式按钮，日间模式、夜间模式和阅读模式由三个图标切入，任意选择，对应的背景颜色和名片的颜色也会跟着改变。以及more的跳转按钮，会链接到我本人的掘金主页。

const modeOptions = {
            light: {
              '--background-image':'linear-gradient(160deg, #DBCCB1 20%,#94AA67 80%)',
                '--background-color': '#ff',
                '--box-shadow': '0 5px 10px  rgba(23, 4, 4, 0.154)',
                '--imgback-color': '#fff',
                '--imgbox-text-color': '#3399ff',
                '--imgbox-x-color': '#854bd7',
                '--id-color':'black',
                '--num-background-color': 'rgb(217, 214, 214)',
                '--num-text-color': '#0A0A0A',
                '--num-color': ' #3399ff',
                '--follow-background-color': '#3399ff',
                '--follow-text-color': '#fff',
                '--more-background-color': 'rgb(201, 199, 199)',
                '--more-text-color': '#fff',
                '--information-background-color': 'rgba(217, 214, 214, 0.5)',
                '--h3-color': 'rgb(102, 105, 111)',
                '--text-color': 'black',
                '--button-color': '#fff',
            },
            dark: {
              '--background-image':'linear-gradient(160deg, #C99E8C 20%,#465E65 80%)',
                '--background-color': '#070D2D',
                '--box-shadow': '0 5px 10px  rgba(209, 192, 192, 0.37)',
                '--imgback-color': '#161E29',
                '--imgbox-text-color': '#3AC9FA',
                '--imgbox-x-color': '#cc99ff',
                '--id-color':'#F7F7F7',
                '--num-background-color': '#161E29',
                '--num-text-color': '#FFE2C7',
                '--num-color': '#F7F7F7',
                '--follow-background-color': '#DC8E47',
                '--follow-text-color': '#F7F7F7',
                '--more-background-color': '#546EE5 ',
                '--more-text-color': '#F7F7F7',
                '--information-background-color': 'rgba(106, 192, 255, 0.5)',
                '--h3-color': '#F7F7F7',
                '--text-color': '#FFE2C7',
                '--button-color': '#070D2D',
            },
            read: {
              '--background-image':'linear-gradient(160deg, #C8C7C5 20%,#98A594 80%)',
                '--background-color': '#415062',
                '--box-shadow': '0 5px 10px  rgba(23, 4, 4, 0.154)',
                '--imgback-color': '#655B50',
                '--imgbox-text-color': '#fff6e6',
                '--imgbox-x-color': '#F0FFF0',
                '--id-color':'#fff6e6',
                '--num-background-color': 'rgb(217, 214, 214)',
                '--num-text-color': '#0A0A0A',
                '--num-color': ' #000003',
                '--follow-background-color': '#FAF9DE',
                '--follow-text-color': '#000003',
                '--more-background-color': '#BEBEBE',
                '--more-text-color': '#FFF',
                '--information-background-color': 'rgba(217, 214, 214, 0.5)',
                '--h3-color': '#fff6e6',
                '--text-color': '#EEE5DE',
                '--button-color': '#415062',
            }
        }
// 主题设置
function setMode(mode) {
  const rootElement = document.querySelector(':root');/*:root是一个伪类，表示文档根元素，用var()函数可以代替元素中任何属性中的值的任何部分*/
  const options = modeOptions[mode];/*light、night、read三种options之一*/
  /*遍历当前mode中的变量*/ 
  for (const k in options) {
    rootElement.style.setProperty(k, options[k]);/*改变属性值*/
  }
}
// 初始设置为light
setMode("light");
/*点击按钮事件 */
document.querySelector(".theme").addEventListener("click", (e) => {
  setMode(e.target.getAttribute("mode"));
})      
/*more按钮跳转*/
function jumpmore(){
  window.location.href="https://juejin.cn/user/932002534263421";
}

展示效果

名片效果

image.png

鼠标hover效果

image.png

后记

本人是前端小白，目前正在蓄力学习中，这次是运用一些简单的html和css做的名片，通过这次动手实践，知道了原来掘金原生的码上掘金这么便捷，是新手接触前端的不二之选。希望自己以后可以学习更多js的知识，给名片添加一些动画效果，变得更酷炫些！

avatar
文章
阅读
粉丝