文字悬停效果

文字悬停效果

效果展示

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

完整代码下载

完整代码下载

相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具5 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test6 小时前
js下载excel示例demo
前端·javascript·excel
Yaml46 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事6 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro