logo
publist
写文章

简介

该用户还未填写简介

擅长的技术栈

可提供的服务

暂无可提供的服务

50天50个小项目 (React19 + Tailwindcss V4) ✨| PasswordStrengthBackground(密码强度背景组件)

使用 React19 和 TailwindCSS 创建实现一个密码强度检测组件,密码强度越强背景图片越清晰反之越模糊。

文章图片
#前端#react.js#typescript
50天50个小项目 (React19 + Tailwindcss V4) ✨| MobileTabNavigation(移动导航切换组件)

使用 React19 和 TailwindCSS 来创建一个仿手机界面的应用切换组件。这个组件模拟了真实手机中点击底部导航栏切换不同页面的动画效果,非常适合用于展示移动端 UI 设计或作为网页中的交互式演示。

文章图片
#前端#react.js#typescript
50天50个小项目 (React19 + Tailwindcss V4) ✨| Pokedex(宝可梦图鉴)

使用 React19 、 TailwindCSS 和 PokeAPI 构建宝可梦图鉴应用的项目实践。通过PokeAPI获取前150只宝可梦数据,实现动态卡片展示与交互效果。项目采用React19 的useState和Tailwind CSS,主要技术点包括:异步数据获取、类型颜色映射、鼠标悬停详情展示等。

文章图片
#前端#typescript
50天50个小项目 (React19 + Tailwindcss V4) ✨| ImageCarousel(图片轮播组件)

使用React19 和TailwindCSS 实现的图片轮播组件。主要功能包括:手动切换图片(上一张/下一张)、自动播放(3秒间隔)、平滑过渡动画。组件采用React19 的useState管理状态,通过transform实现图片切换效果,并利用Tailwind CSS快速构建UI。

文章图片
#前端#typescript
50天50个小项目 (React19 + Tailwindcss V4) ✨| AnimatedCountdown(倒计时组件)

使用React19 、TailwindCSS构建的倒计时动画组件。该组件通过Composition API管理状态,实现从"GO"字样到数字3、2、1的动画过渡效果,包含缩放、旋转和透明度变化等视觉效果。

文章图片
#前端#typescript
50天50个小项目 (React19 + Tailwindcss V4) ✨| NotesApp(便签笔记组件)

使用 React19 、TailwindCSS 和 marked 构建了一个功能完善的 Markdown 笔记应用。它不仅支持添加、编辑、删除笔记,还能自动保存内容,并实时渲染 Markdown。支持以下功能: 增删改查笔记卡片 实时 Markdown 渲染预览 本地存储自动保存 响应式 UI 设计 技术。

文章图片
#javascript
50天50个小项目 (React19 + Tailwindcss V4) ✨| GoodCheapFast(Good - Cheap - Fast三选二开关)

基于React19 的"Good-Cheap-Fast"三选二交互组件开发,通过React19 + Tailwindcss V4实现。该组件模拟项目管理中的权衡法则,用户最多只能同时选择两个选项。核心逻辑通过toggleFeature函数控制状态互斥,当三个选项全选时会自动关闭最早开启的选项。采用动态类绑定实现开关按钮的平滑过渡效果。

文章图片
#前端#react.js#typescript
50天50个小项目 (React19 + Tailwindcss V4) ✨ | PasswordGenerator(密码生成器)

基于React19 + Tailwindcss V4的密码生成器组件,该组件允许用户自定义密码长度(1-100位)并选择包含的字符类型(大小写字母、数字、符号)。利用TailwindCSS快速构建响应式UI界面。核心功能通过generatePassword函数实现,根据用户选择的字符集随机生成密码。

文章图片
#前端#react.js#typescript
50天50个小项目 (React19 + Tailwindcss V4) ✨ | AutoTextEffect(自动打字机)

使用React19 + Tailwindcss V4实现一个动态打字机效果的组件。该组件实现了逐字显示文本、模拟删除操作、调节打字速度等功能。

文章图片
#前端#typescript
50天50个小项目 (React19 + Tailwindcss V4) ✨ | DoubleClickHeart(双击爱心)

使用 React19 + Tailwindcss V4实现双击图片触发爱心动画效果,并统计点赞次数。主要技术点包括:响应式状态管理、双击事件判断(800ms间隔检测)、动态生成定位爱心元素、CSS放大淡出动画,以及使用 TailwindCSS 构建 UI 布局。​这个交互体验非常适用于社交媒体、照片墙、内容点赞等场景。​

文章图片
#前端#typescript
    共 40 条
  • 1
  • 2
  • 3
  • 4
  • 请选择