我的简陋名片 |「青训营 X 码上掘金」主题创作

当青训营遇上码上掘金。

主题 1：我的名片

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

介绍

本次选择了我的名片这个主题，所以外观想的是写一个类似于名片大小的卡片类型，看了一些设计网站，觉得毛玻璃挺有意思的，所以整体名片背景以毛玻璃效果来实现，全部使用原生来写的，复习一下自己那微弱的原生基础吧QAQ。

主要效果

毛玻璃的效果主要利用了

backdrop-filter: blur();

整体的布局也基本上都是采用了flex以及position来完成的

动效也是一些比较基础的transition、animation+@keyframes

鼠标移入的原型扩散就是利用了:hover+transition来实现的

名片后的背景圆形就是利用了animation+@keyframes来实现的

.circle1 {
  width: 200px;
  height: 200px;
  background-color: #BA5370;
  border-radius: 50%;
  position: fixed;
  top: 25%;
  left: 30%;
  animation: demo 10s ease 0s infinite;
}

@keyframes demo {
  0%{
    transform: translateX(0%)
  }
  50%{
     transform: translateX(20%)
  }
  100%{
    transform: translateX(0%)
  }
}

.circle2 {
  width: 300px;
  height: 300px;
  background-color: #F4E2D8;
  border-radius: 50%;
  position: fixed;
  top: 50%;
  left: 60%;
   animation: demo2 20s ease 0s infinite;
}

@keyframes demo2 {
  0%{
    transform: translateX(0%) scale(100%)
  }
  50%{
     transform: translateX(5%) scale(90%)
     
  }
  100%{
    transform: translateX(0%) scale(100%)
  }
}

我写的js代码我觉得逻辑上会有一些问题，也可以有一些更好的方法来实现My和Team的跳转

let My = document.getElementsByClassName('My')[0];
let Team = document.getElementsByClassName('Team')[0];
let My_introduce = document.getElementsByClassName('My_introduce')[0];
let My_Team = document.getElementsByClassName('My_Team')[0];
let Select = document.getElementsByClassName('Select')[0];
My.addEventListener('click',function(){
  My.className = 'My move';
  Select.className = 'Select op0';
  My_introduce.className = 'My_introduce move2';
  My_introduce.style.display = "flex";
  setTimeout(()=>{
    Select.style.display = "none"
  },500)
})
Team.addEventListener('click',function(){
  Team.className = 'Team move';
  Select.className = 'Select op0';
  My_Team.className = 'My_Team move2';
  My_Team.style.display = "flex";
  setTimeout(()=>{
    Select.style.display = "none"
  },500)
})

详细可以直接看文章末尾的码上掘金 写的比较简陋很多兼任情况也没有考虑 欢迎大佬的指正QAQ