当青训营遇上码上掘金---名片创作

当青训营遇上码上掘金

聊一聊

报名参加了这次的字节青训营，怀着激动和忐忑的心情进入学习，我的前端基本上是自己自学的，也走了不少的弯路，在技术知识上也有不少的欠缺，所以才报名了这次的青训营，希望能够学习到更多的知识，补充自己的知识点。

主题介绍：我的名片

选择这个主体的原因是：名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。所以便做了这个自我介绍的名片设计(由于自己审美一般，所以做的效果可能不太好看hhh😭)

效果展示：

鼠标移入卡片有特效

思路过程：

• 使用两个div，其中一个div作为名片主体部分，一个div作为背景板
• 当进行鼠标移入操作时，使用transform:translateY(-80px)移动名片主体，使用transform="scale(1.1)放大背景板
• 当进行鼠标移出操作时候，回归原来样式

代码展示：

详细样式和结构就不多展示，详细展示逻辑的js部分

结构部分:

  <div id="app">
      <!--背景板-->
      <div class="bg"></div> 
       <!--卡片主体-->
      <div class="my_card">
       ...
      </div>
</div>

js部分:

const mycard=document.querySelector(".my_card")
const bg=document.querySelector('.bg')
mycard.addEventListener("mouseenter",function(){
  mycard.style.boxShadow="none"
  mycard.style.transform="translateY(-80px)"
  bg.style.transform="scale(1.1)"
})

mycard.addEventListener("mouseleave",function(){
  
  mycard.style.transform="translateY(0)"
  bg.style.transform="scale(1)"
  mycard.style.boxShadow="10px 10px 10px #d9d9d9"
})

总结：

由于是第一次使用码上掘金编辑器，不太熟悉，所以图片链接是使用图床线上链接，卡片样式的设计灵感是信封。本次的设计比较简单，采用的也是比较基础的html、css、js三件套，缺点是html设计的结构不太优雅，层级比较多。js的逻辑也比较简单，也算是一次练习基础的机会。