文字悬停效果
文字悬停效果
效果展示
CSS 知识点
- CSS 变量使用回顾
- -webkit-text-stroke 属性的运用与回顾
页面整体结构实现
<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>
实现页面文字整体布局效果
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 拆分文字
为了方便实现我们需要的效果，需要把每个单词进行拆分，并且为每个字母添加同的样式和动画效果。具体的拆分代码如下：
const texts = document.querySelectorAll(".text");
texts.forEach((text) => {// 获取A标签中的单词，使用trim()函数进行字符串的切割，然后添加到A标签中const spans = Array.from(text.textContent.trim()).map((char) => `<span>${char === "" ? " " : 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`;});});});
});
为每个单词添加基础样式
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;
}
为每个单词添加悬停样式
ul li .text:hover span:not(:first-child) {color: var(--clr);transition: 1s;transform: rotateX(360deg);-webkit-text-stroke: 1px transparent;
}
完整代码下载
完整代码下载