当青训营遇上码上掘金

前言

此次「青训营 X 码上掘金」主题创作活动我选择的是“主题1：我的名片”。一看到“我的名片”我就想到手机QQ里面的个性名片展示，其中我最喜欢围绕头像的气泡的效果啦；同时回忆起了之前做过的一个模拟抽奖池的动画，觉得可以应用到这次的活动中。代码片段模板选用的码上掘金的vue3.x，素材是选用笔者深爱的二次元作品之一《全职猎人》，对主人公杰·富力士作一个简单的个性名片展示。废话不多说，直接看下图最终成果。

效果实现

设计思路

首先先访问者展示大头头像、姓名、性别和生日，将特征属性放在气泡中显示，气泡要一直上下浮动；如果访问者想要查看个人的详细信息，直接点击我的名片任意部分即可查看，再次点击回到大头头像。
实现步骤

首先画一个自己想要的大致效果图，如图：

QQ图片20230205033200.png

然后根据效果图编写代码结构

书写CSS样式：气泡浮动效果实现

使用绝对定位将泡泡四处分散
对li标签设置background属性，把泡泡背景导入
- 在这里推荐一个网站Postimages -- 免费图片托管/图片上传，可以将本地图片转换成图片链接，我在这次编码活动中就使用到了它
使用animation属性设置泡泡浮动效果

在这里贴一张CSS动画属性值的图，温故而知新

        @keyframes move {
          from {
            transform: translate(0, 0)
          }

          to {
            transform: translate(0, 20px)
          }
        }

        .bubble {
          color: #fff;
          position: absolute;
          border-radius: 50%;
          text-align: center;
          animation: move 2s ease-in-out infinite alternate;
        }

最后就是实现两种模式的切换啦
- 直接声明一个布尔值变量showmore，在最外层的#wrapper盒子绑定点击事件；当访问者点击我的名片时，改变showmore的值，动态改变DOM元素的类名。
- 通过类名的改变，触发盒子display属性的改变和css动画的执行。

<template>
  <div id="wrapper" @click="changeShow">
    <div :class="['main',showmore?'hide':'showmain']">
      <div class="self-photo"></div>
      <div class="info">
        <span>杰·富力士</span><span>男</span><span>5月5日</span>
      </div>
      <ul class="details">
        <li class="bubble"><span>天然黑</span></li>
        <li class="bubble"><span>职业猎人</span></li>
        <li class="bubble"><span>团宠</span></li>
        <li class="bubble"><span>猜猜拳</span></li>
        <li class="bubble"><span>奇犽</span></li>
      </ul>
    </div>
    <div :class="['more',showmore?'showmore':'hide']">
      <div class="self-photo"></div>
      <div class="info">
        <span>杰·富力士</span><span>男</span><span>5月5日</span>
      </div>
      <p>日本漫画《全职猎人》及其衍生作品中的男主角。隶属于猎人协会的职业猎人。</p>
      <div class="desc">
        <ul class="details">
          <li class="">属性：<span>天然黑，团宠</span></li>
          <li class="">身份：<span>职业猎人</span></li>
          <li class="">念能力：<span>猜猜拳</span></li>
          <li class="">目标：<span>成为职业猎人（已实现），找到金（已实现）</span></li>
          <li class="">亲人：<span>米特，金·富力士，东·富力士</span></li>
          <li class="">好友：<span>奇犽·揍敌客，酷拉皮卡，雷欧力，凯特</span></li>
          <li class="">师父：<span>云古，比司吉·酷露佳</span></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const showmore=ref(false)
    function changeShow() {
      showmore.value = !showmore.value
    }
    return {
      showmore,
      changeShow,
    };
  },
});
</script>

<style>
.showmain{
  display: flex;
  animation: show 1s ease-in-out;
}
.showmore{
  display: flex;
  animation: show 1s ease-in-out;
}

.hide{
  display: none;
  animation: show 1s ease-in-out reverse;
}
</style>

总结

气泡浮动：绝对定位+CSS动画
名片模式切换：动态改变类名+CSS动画
作品链接：MyCard for HunterxHunter

如有改进，欢迎指出━(｀∀´)ノ亻!

气泡动画名片展示 | 「青训营 X 码上掘金」主题创作活动

前言

效果实现

总结