有趣味的登录页它踏着七彩祥云来了

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

最近，有一个比较火的很有趣且灵动的登录页火了。

• 角色视觉跟随鼠标
• 输入框打字时扯脖子瞅
• 显示密码明文时避开视线

 

已经有大神（katavii）复刻了动画效果，并在github上开源了：github.com/katavii/ani… ，基于React实现。

如果你的项目是用Vue开发的，可以考虑用AI将此项目转换成了Vue3的语法写法。

最简单的方式，直接用Claude Code一句话就能完成，根据模型能力，你可能需要多次调试。

claude
帮我把这个项目转成vue3 + ant-design-vue的前端项目

以下是我的转换代码，如果你的AI代码没有调试成功，可以参考下。

创建项目

现在开发前端项目，肯定首选Vite。

pnpm create vite
# 选择Vue模板、TypeScript语法

封装组件

在src/components/创建animated-characters文件夹

EyeBall

创建 src/components/animated-characters/EyeBall.vue，制作动画的大眼睛。

<template>
  <div
    class="eyeball"
    :data-max-distance="maxDistance"
    :style="eyeballStyle"
  >
    <div
      class="eyeball-pupil"
      :style="pupilStyle"
    />
  </div>
</template>

<script setup lang="ts">
interface Props {
  size?: string
  pupilSize?: string
  maxDistance?: number
  eyeColor?: string
  pupilColor?: string
}

const {
  size,
  pupilSize,
  maxDistance,
  eyeColor,
  pupilColor
} = withDefaults(defineProps<Props>(), {
  size: '48px',
  pupilSize: '16px',
  maxDistance: 10,
  eyeColor: 'white',
  pupilColor: 'black'
})

const eyeballStyle = {
  width: size,
  height: size,
  borderRadius: '50%',
  backgroundColor: eyeColor,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  overflow: 'hidden',
  willChange: 'height'
}

const pupilStyle = {
  width: pupilSize,
  height: pupilSize,
  borderRadius: '50%',
  backgroundColor: pupilColor,
  willChange: 'transform'
}
</script>

Pupil

创建 src/components/animated-characters/Pupil.vue，制作动画的小眼睛。

<template>
  <div
    :data-max-distance="maxDistance"
    class="pupil"
    :style="pupilStyle"
  />
</template>

<script setup lang="ts">
interface Props {
  size?: string
  maxDistance?: number
  pupilColor?: string
}

const {
  size,
  maxDistance,
  pupilColor
} = withDefaults(defineProps<Props>(), {
  size: '12px',
  maxDistance: 5,
  pupilColor: 'black'
})

const pupilStyle = {
  width: size,
  height: size,
  borderRadius: '50%',
  backgroundColor: pupilColor,
  willChange: 'transform'
}
</script>