「青训营 X 码上掘金」个人名片——星星看风吟

当青训营遇上码上掘金，且听风吟，且伴coding

效果

起名字的时候喜欢起一个文艺的，所以且命名“星星看风吟”

灵感来源：我自己的名字是——抬头_是漫天星，背景图片是动态壁纸（壁纸是我从网页获取的，具体地方暂时忘了，想起来或下次看到再补充回来），突然就想到一个词——且听风吟

实现

背景的动态壁纸

关于动态壁纸的设置也比较简单,就是一个video，我从网页上获取标签元素的时候拿到的是MP4类型都文件，所以用video标签，

只是这里要设置自动播放、循环播放和静音播放，因为自动播放要设置静音muted，然后再简单设置一下样式覆盖就差不多了

//html
<!-- 自动播放要设置静音muted -->
<video class="video" autoplay muted loop>
  <source src="https://wallpaper-static.cheetahfun.com/wallpaper/sites/dynamics/vm4.mp4" type="video/mp4" />
</video>
//css
.video {
    z-index: -100;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

名片的毛玻璃

有关毛玻璃的实现思路，涉及到了伪元素、定位还有元素的堆叠顺序

就是把装文本的“盒子”叠在实现模糊的一层的伪元素之上，利用定位保证伪元素和该“盒子”大小一致，然后就在“盒子”中装下什么文本都可以啦，不会让其中的文字也模糊

<section class="login-form">
  <section id="one"  class="change-css">
    <!-- 这里写文本 -->
  </section>
</section>

.login-form {
    color: #fff;
    width: 44%;
    padding: 20px;
    border-radius: 20px;
    z-index: 100;
    position: absolute;
    top: 28%;
    left: 28%;

    section {
      display: flex;
      justify-content: space-around;
    }

    &::after {
      position: absolute;
      content: "";
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      backdrop-filter: blur(6px);
    }

  }

点击

好久没用原生js写过了，所以这次也试着写了一个点击效果,就是一次点击缩小一次点击放大，还有过渡时间，让缩放效果看起来不那么生硬~

const card = document.getElementById('one')
let animationed = false
card.addEventListener("click",()=>{
  animationed = !animationed
  if(animationed){
    card.style.transform = 'scale(0.8)'
    card.style.transitionDuration = '1s'
  }else card.style.transform = 'scale(1)'
})

写在最后

这个《个人名片》原先也不知道要展示什么类型，以何种方式展示出来，现实中普通的、常见的名片，就是一张小小的纸上边印着简要的信息，所以我就借鉴了数据库课设中登录界面的设计（其实还是很喜欢这个动态背景嘿嘿），加上毛玻璃，实现出了这个效果。