当青训营遇上码上掘金——我的名片当青训营遇上码上掘金这次青训营前端专场我写的主题是--制作我自己的名片。 >名片是向人

当青训营遇上码上掘金

这次青训营前端专场我写的主题是--制作我自己的名片。

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

效果如下:

第一眼看见这个题目我就想做了,

作为一个程序员,互联网可以说是我第二个家,可介于网络的特殊性,我可以在这用自己的虚拟化名,我的名字,当然就是Lyra
网站的可定制性取决于程序员的上限,我们可以做出很舒适灵巧的动效来加深名片的可互动性,我给我自己设计的logo就是这个它会自己进行旋转,当鼠标hover时,三片叶子就会展开,不为别的,就是为了好看

大伙的时间都很宝贵,咱得用最简洁的方式展示自己,于是我用了

优雅:优雅、可爱、可以创造出可以成为他人回忆的事物
创意:充满了奇奇怪怪的创意,能给你带来无限乐趣
个性:我对普通的人类没有兴趣。你们之中如果有外星人、未来人、异世界来客或者超能力者以及喜爱一切有趣事物之人的话就来找我，完毕。

三个板块来简单介绍我自己,只能说生动形象好吧,我觉得网上的个人名片应该趋向于个性化,因为并不是过于正式的地方,大伙都是抱着看乐子的心态来看我的名片

以下是页面的布局

<body>
  <div class="topBarWrapper">
      <div class="topBar">
          <ul class="box">
              <li id="name">Lyra-Planet</li>
              <ul class="leftBox">
                  <li id="useGuide">主页</li>
                  <li id="exampleWeb">图书角</li>
                  <li id="helpList">杂货铺</li>
                  <li id="traveling">友链</li>
                  <li id="snow">
                      <button class="colorbtn">
                          <li class="spring">Spring</li>
                          <li class="summer">Summer</li>
                          <li class="autumn">Autumn</li>
                          <li class="winter">Winter</li>
                      </button>

                  </li>

                  <li>
                      <div id="search"><i class="fa fa-search"></i>Search</div>
                  </li>
              </ul>
          </ul>
      </div>
  </div>

  <div class="iconWrapper">
      <div class="icon-box">
          <div class="icon">

              <div class="circle1-wrapper">
                  <div class="circle1-box">
                      <div class="circle1"></div>
                  </div>

              </div>
              <div class="circle2-wrapper">
                  <div class="circle2-box">
                      <div class="circle2"></div>
                  </div>

              </div>
              <div class="circle3-wrapper">
                  <div class="circle3-box">
                      <div class="circle3"></div>
                  </div>

              </div>
          </div>
      </div>
  </div>

  <div class="contentWrapper">
      <div class="content">
          <div class="contentTitle">
              <h1>Lyra</h1>
              <h2>cute and fascinating</h2>
          </div>
          <div class="contentLink">
              <div class="quickStart-Wrapper">
                  <div class="quickStart">
                      <a href="">联系我</a>
                  </div>
              </div>
              <div class="exampleWeb-Wrapper">
                  <div class="exampleWeb" onclick="">
                      <a href="">关注我</a>
                  </div>
              </div>
          </div>
      </div>
  </div>

  <div class="characteristicWrappper">
      <div class="characteristic">
          <h2>
              优雅
          </h2>
          <span>
              优雅、可爱、可以创造出可以成为他人回忆的事物
          </span>
      </div>
      <div class="characteristic">
          <h2>
              创意
          </h2>
          <span>
              充满了奇奇怪怪的创意,能给你带来无限乐趣
          </span>
      </div>
      <div class="characteristic">
          <h2>
              个性
          </h2>
          <span>
              我对普通的人类没有兴趣。你们之中如果有外星人、未来人、异世界来客或者超能力者以及喜爱一切有趣事物之人的话就来找我，完毕。
          </span>
      </div>
  </div>

  <div class="bottomBarWrapper">
      <div class="bottomBar">
          Created by &nbsp;<a href="#">Lyra</a>&nbsp; 2023
      </div>

  </div>
  <script>
      console.log(1)
      let htmlColor = document.documentElement;
      let changeColor = document.querySelector('#snow')
      let colorBtn = document.querySelector('.colorbtn')
      let colors = colorBtn.querySelectorAll('li')
      let index = 0

      let colorChange = () => {

          if (index == 4) {
              index = 0
          }
          console.log(index)
          colors.forEach(color => {
              color.style.opacity = "0"
          })
          colors[index].style.opacity = "1"
          let currentTheme = htmlColor.getAttribute('data-theme')
          themeChange(index)
          index++
      }

      themeChange = (index) => {
          switch (index) {
              case 0:
                  return htmlColor.setAttribute('data-theme', 'winter')
              case 1:
                  return htmlColor.setAttribute('data-theme', 'autumn')
              case 2:
                  return htmlColor.setAttribute('data-theme', 'summer')
              case 3:
                  return htmlColor.setAttribute('data-theme', 'spring')
          }
      }
      colorChange()
      colorBtn.addEventListener('click', () => {
          colorChange()
      })
  </script>