[ 「青训营 X 码上掘金」主题创作活动 | 青训营笔记]

变成半只贝壳
100 阅读4分钟

当青训营遇上码上掘金。

主题：我的名片

我们都知道名片是向人介绍自我的重要工具，作为程序员，能够用代码向别人进行自我介绍是一件很酷的事情，这边给大家介绍一下好看的名片模板怎么制作

灵感

我也是初次用代码进行名片制作，并没有很多新奇的想法，想着能够让名片的模板尽量好看些就行，并没有其他的附加功能。

亮点

  • 气泡特效，让名片处于动态的气泡背景中

  • 盒子立体化，简洁好看

预览效果

QQ录屏20230130141458.gif

  • 气泡是随机生成的，大小随机，速度随机
  • scroll滚动条是隐藏了的
  • 通过不同的box-shadow来使明星片更具立体化

如何实现亮点

本次明信片并无其他功能，所以用纯前端三件套书写，建议大家去尝试尝试。

布局实现

一个是flex布局实现,具体代码不难，这边不展开描述

      display: flex;
      flex-direction: column;
      justify-content: space-around;

然后是滚动条的隐藏,在需要隐藏滚动条的元素后加上::-webkit-scrollbar即可修改该元素滚动条的样式啦，不仅可以隐藏，我们也可以修改它的宽度，颜色，弧度等等。

.sections::-webkit-scrollbar {
      display: none;
    }

box-shadow让盒子立体化

立体化并不是box-shadow一个属性完成的，但是它是主要作用，我们可以通过border，background等属性进行配合，box-shadow设计的颜色只要和背景颜色相差不大即可

      border-radius: 12px;
      border: 1px solid #c0c7cf;
      background: #E0E6ED;
      box-shadow: 0 0 0 3px rgb(255 255 255 / 40%) inset,
        0 13px 15px rgb(31 45 61 / 15%);

其中inset表示外部阴影变为内部阴影

我们还可以自己写一些shadow盒子，覆盖在上面，使其像气泡一个变得透明立体

比如：

.mc-shadow {
      position: absolute;
      width: 99%;
      margin-left: 0.5%;
      height: 35px;
      background: -webkit-linear-gradient(top, white, #e0e6ed);
      border-radius: 12px;
      z-index: 100;
      content: "";
    }
    .mc-shadow-two {
      position: absolute;
      bottom: 0;
      width: 99%;
      margin-left: 0.5%;
      height: 20px;
      filter: blur(1px);
      background: -webkit-linear-gradient(bottom, #f2f5f7, #e0e6ed);
      border-radius: 10px;
      z-index: 100;
      content: "";
    }

将一个阴影放置盒子顶部，一个放置盒子底部，通过设置渐变色，让盒子变得像立体一样，

实现后的效果：

image.png

如图包括箭头也是通过类似方法附加border，box-shadow等属性纯css制作的，大家可以去尝试一下

气泡实现

  1. 设置好气泡的区域，我这边只用一个section即可
   <section></section>

设置好气泡的样式，也同样通过flex对气泡进行布局，通过::before在气泡里面设置高光可以使气泡更具立体化，建议用深色的背景效果会更明显

 section {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    section span {
      position: absolute;
      bottom: -50px;
      background: transparent;
      border-radius: 50%;
      pointer-events: none;
      box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
      animation: animate 4s linear infinite;
    }

    section span::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      transform: scale(0.25) translate(-70%, -70%);
      background: radial-gradient(#fff, transparent);
      border-radius: 50%;
    }

设置好动画并使用

animation: animate 4s linear infinite;

@keyframes animate {
      0% {
        transform: translateY(0%);
        opacity: 1;
      }

      99% {
        opacity: 1;
      }

      100% {
        transform: translateY(-1200%);
        opacity: 0;
      }
    }

接下来就是最重要的部分了，通过js动态生成元素

  • 先获取元素

  • 定义好生成元素的变量

  • 设置好气泡的随机大小，随机起始位置，再通过appendChild拼接

  • 设置好气泡的消失时间

  function createBubble() {
    const section = document.querySelector("section");
    const createElement = document.createElement("span");
    var size = Math.random() * 60;
    createElement.style.width = 20 + size + "px";
    createElement.style.height = 20 + size + "px";
    createElement.style.left = Math.random() * innerWidth + "px";
    section.appendChild(createElement);
    setTimeout(() => {
      createElement.remove();
    }, 4000);
  }

最后一步，设置好定时器

setInterval(createBubble, 50);

这样一个简易的气泡特效就做好啦，是不是很简单啊，快去试试吧

最后

这样，一个简易的名片就做好啦，此次制作并没有很大的难点，只要有前端三件套的基础都可以制作，通过此次创作，让我对一些前端的知识有了更多的了解。希望后面可以对名片加入更多的功能

比如：

  • 可以自主隐藏气泡
  • 可以进行更换头像
  • 加入按钮，可以变换样式

感谢大家观看！

avatar
文章
阅读
粉丝