文字悬停效果

文字悬停效果

效果展示

CSS 知识点

  • CSS 变量使用回顾
  • -webkit-text-stroke 属性的运用与回顾

页面整体结构实现

html 复制代码
<ul>
  <li style="--clr: #e6444f">
    <a href="#" class="text">First</a>
  </li>
  <li style="--clr: #f0b024">
    <a href="#" class="text">Attempt</a>
  </li>
  <li style="--clr: #00a492">
    <a href="#" class="text">In</a>
  </li>
  <li style="--clr: #af579b">
    <a href="#" class="text">Learning</a>
  </li>
</ul>

实现页面文字整体布局效果

css 复制代码
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222;
  overflow: hidden;
}

ul {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
ul li {
  list-style: none;
}
ul li .text {
  font-size: 4em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  font-weight: 800;
  line-height: 1em;
  display: flex;
  align-items: center;
}

使用 JavaScript 拆分文字

为了方便实现我们需要的效果,需要把每个单词进行拆分,并且为每个字母添加同的样式和动画效果。具体的拆分代码如下:

javascript 复制代码
const texts = document.querySelectorAll(".text");
texts.forEach((text) => {
  // 获取A标签中的单词,使用trim()函数进行字符串的切割,然后添加到A标签中
  const spans = Array.from(text.textContent.trim())
    .map((char) => `<span>${char === "" ? "&nbsp;" : char}</span>`)
    .join("");
  text.innerHTML = spans;

  const spanList = text.querySelectorAll("span");
  spanList.forEach((span, index) => {
    span.addEventListener("mouseover", () => {
      spanList.forEach((s, i) => {
        const distance = Math.abs(index - i);
        const delay = (distance * 0.1).toFixed(1);
        s.style.transitionDelay = `${delay}s`;
      });
    });
  });
});

为每个单词添加基础样式

css 复制代码
ul li .text span:not(:first-child) {
  letter-spacing: 0.1em;
}
ul li .text span {
  position: relative;
  -webkit-text-stroke: 1px #fff;
  color: transparent;
  transition: 1s;
  transform: rotateX(0deg);
}
ul li .text span:nth-child(1) {
  width: 70px;
  height: 70px;
  background: var(--clr);
  color: #222;
  -webkit-text-stroke: 0px #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
}

为每个单词添加悬停样式

css 复制代码
ul li .text:hover span:not(:first-child) {
  color: var(--clr);
  transition: 1s;
  transform: rotateX(360deg);
  -webkit-text-stroke: 1px transparent;
}

完整代码下载

完整代码下载

相关推荐
程序员爱钓鱼3 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel10 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着10 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友11 小时前
什么是API签名?
前端·后端·安全
会豪13 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子13 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶13 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子13 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_14 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233314 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts