文字悬停效果

文字悬停效果

效果展示

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

完整代码下载

完整代码下载

相关推荐
y先森2 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒5 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员5 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐6 小时前
前端图像处理(一)
前端