文字悬停效果

文字悬停效果

效果展示

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;
}

完整代码下载

完整代码下载

相关推荐
Z_B_L6 分钟前
问题记录--elementui中el-form初始化表单resetFields()方法使用时出现的问题
前端·javascript·vue.js·elementui·1024程序员节
袁煦丞9 分钟前
PandaWiki开源知识库系统破解内网限制:cpolar内网穿透实验室第616个成功挑战
前端·程序员·远程工作
golang学习记10 分钟前
Next.js MCP Server 实战指南:让 AI 编程助手真正“懂”你的应用
前端
柳鲲鹏18 分钟前
多种方法:OpenCV中修改像素RGB值
前端·javascript·opencv·1024程序员节
susu108301891119 分钟前
chrome浏览器设置为手机模式
前端·chrome
IT_陈寒1 小时前
SpringBoot 3.2 实战:这5个新特性让你的开发效率提升50%!
前端·人工智能·后端
水星梦月2 小时前
跨平台开发中的图形渲染:Canvas与View+CSS的性能分析与决策路径
前端·css·图形渲染·canvas
yuanyxh2 小时前
前端仔的一次运维实践
linux·运维·前端
望获linux5 小时前
【Linux基础知识系列:第一百五十九篇】磁盘健康监测:smartctl
linux·前端·数据库·chrome·python·操作系统·软件