当青训营遇上码上掘金

前言

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。

作为前端开发人员，使用前端开发技术，HTML,CSS,JS这三个前端Web三件套来实现自我介绍，是一件很炫酷的事情，那么就让我们开始制作吧。

实现

• 创建一个外部容器用来封装名片内部各个元素，一个内部容器存放需要实现动态特效的内容区

   <div class="app">
       <div class="con">
            <div class="card">
               <div class="hpicture">
                 
                             </div>
                      </div>
               </div>
       </div>
  

• 填入主要内容:img部分是外层表面图片, ip为部分个人信息展示。

                  <img>
  		</div>
  		<div>
  			<p></p>
  		</div>
  		<div class="ip">
  			<p></p>
  		</div >
  		<div class="ip1">
  			<p></p>
  		</div>
  		<div class="ip2">
  			<p></p>
  

实现效果

• 样式变换，主要是利用伪类来控制元素的大小变换，此处主要是hover。

  .card:hover{
   height: 40vh;
   width: 40vw;
   transform: rotate(360deg);  
  

• 动画，主要是利用transition 来实现元素的翻转。

     transition:
     width 1.5s,
     height 1.5s,
     transform 1.5s;
     
     
  

• 获取class的值，实现名片翻转后另一面的卡片展示。

    let head=document.querySelector('.card');
           let hpicture=document.querySelector('.hpicture');
           let ip=document.querySelector('.ip');
           let ip1=document.querySelector('.ip1');
           let ip2=document.querySelector('.ip2');
           let Hh=head.offsetHeight;
           console.log(head.offsetHeight);
           head.addEventListener("mouseover",function(){
   setTimeout(function(){
   	if(head.offsetHeight!=Hh){
   		ip.style.display='block';
   		ip1.style.display='block';
   		ip2.style.display='block';
   	}
   },1000)
           });
           head.addEventListener("mouseout",function(){
                   setTimeout(function(){
   	if(head.offsetHeight<=(Hh*2)){
   		ip.style.display='none';
   		ip1.style.display='none';
   		ip2.style.display='none';
   	}
   },1000)
           });
  

翻转后实现，展示详细个人信息

完整代码

整体代码如下：

总结

通过学习前端技术实现我的名片，是一种很炫酷的事。寒假进入青训营后，学习到的前端开发的知识，让我对前端有了更多的了解和学习。当青训营遇上码上掘金！！