CSS技巧:用十行代码写一个跃动文字链的hover效果组件

我不知道这种效果该叫什么名称,姑且叫做「跃动文字链」吧。它的效果就是:在一串文字中,鼠标滑到哪个文字,这个文字就起立。就像这个动图一样:

这个效果可能没有什么业务价值,主打一个互动性和视觉趣味性。试问哪个人看到可互动的动效会舍得离开呢?

代码实现

「跃动文字链」效果实现非常简单,它不在乎你使用HTML、Vue还是React,它只需要你写CSS。

我用TailwindCSS实现的代码如下,一共只要12行,掐头去尾就当作只有10行吧:

jsx 复制代码
export default function Caterpillar({ text, className, bgColor }) {
  const chars = text.split('');
  return (
    <div className={`flex ${className}`}>
      {chars.map((c, i) => (
        <div key={i} className={`flex ${bgColor || 'bg-[#4472c4]'} ${i === 0 ? 'rounded-s-lg' : ''} ${i === chars.length - 1 ? 'rounded-e-lg' : ''} border-top border-bottom border-2 border-brand bg-primary text-background -ml-[2px] pb-[0.1rem] px-2 transition duration-300 ease-in-out hover:-translate-y-1`}>
          <span>{c}</span>
        </div>
      ))}
    </div>
  );
}

${i === 0 ? 'rounded-s-lg' : ''} ${i === chars.length - 1 ? 'rounded-e-lg' : ''} 是给第一个和最后一个块设置圆角边框;
transition duration-300 ease-in-out hover:-translate-y-1 是添加过渡动画,让文字跃动在切换的时候平缓过渡;

调用组件:

tsx 复制代码
<Caterpillar text={BLOG.BIO} className="justify-center text-white -ml-px p-1" bgColor="bg-[#4472c4]" />

如果你使用的是React + TailwindCSS,你可以直接复制我的代码,如果使用Vue,只需要改写标签遍历,这样你就拥有了自己的「文字跃动串」组件啦。

TailwindCSS介绍

如果你还不了解TailwindCSS,可以通过这一节内容入门。

TailwindCSS是一种CSS框架,它几乎把每个CSS属性都写成一个样式类,你可以通过自由组合这些样式类来创建复杂的设计和布局。这种思想也被称作"原子化"设计。

TailwindCSS相比传统的CSS写法有几个优势:

  • 高效性:通过使用样式类,开可以快速地构建界面而不必写很多自定义CSS
  • 响应式设计:Tailwind内置了响应式设计的样式类,使得创建响应式设计非常高效
  • 高度可定制:可以通过Tailwind的配置文件轻松扩展样式设计

TailwindCSS用法

无论是在Vue、React还是Next.js项目中,使用TailwindCSS的步骤类似。以下是使用步骤:

  1. 安装依赖

    csharp 复制代码
    npm install tailwindcss postcss autoprefixer
    npx tailwindcss init

    这会安装TailwindCSS及其依赖,并创建一个 tailwind.config.js 配置文件。

  2. 在CSS里引入Tailwind的层

    在主CSS文件里引入以下代码:

    less 复制代码
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  3. 扩展配置

    tailwind.config.js 里,你可以扩展自己的设计。如果没有特殊的UI需求,使用默认配置就足够了。

结语

挖掘CSS技巧的过程也是学习设计的过程,关注我的掘金专栏,一起学习CSS新特性和好看的样式设计。

专栏资源

专栏介绍:分享CSS新特性和好看的样式设计

专栏地址:👉# 简明实用CSS技巧

相关推荐
IT_陈寒5 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用7 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥23 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼4 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell6 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel9 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip9 小时前
JavaScript事件流
前端·javascript