CSS文字特效实例：猜猜我是谁

引言

在之前的文章中，我们分别实现了空心文字、文字填充、文字模糊、文字裂开等效果。本文将使用一个小实例，组合使用相关特效：当鼠标悬停在图片上时，其余图片模糊，且文字会上下裂开，其效果图如下所示：

效果图

在这里插入图片描述

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字特效实例：猜猜我是谁</title><style>/* 容器样式 */.image-container {display: flex;width: 100%;height: 80vh;}/* 图片样式 */.image-wrapper {flex: 1;margin: 10px;font-size: 150px;font-weight: 900;/* 文字裁剪效果 */background-clip: text; -webkit-background-clip: text; /* 颜色设置为透明，用图片填充 */color: transparent; /* 图片铺满容器 */background-size: cover; background-position: center;/* 文字水平居中 */text-align: center;/* 文字垂直居中 */display: flex;align-items: center;justify-content: center;border: 2px solid #eee;border-radius: 10px;/* 确保伪元素相对于该元素定位 */position: relative; }/* 分别给每个image-wrapper设置不同的背景 */.image-wrapper:nth-child(1) {background-image: url('./img/nezha.jpg');}.image-wrapper:nth-child(2) {background-image: url('./img/aobing.jpg');}.image-wrapper:nth-child(3) {background-image: url('./img/xiaobao.jpg');}/* 模糊效果样式 */.blur {filter: blur(5px);}/* 文字裂开效果 */.text-split::before,.text-split::after {/* 使用自定义属性中的文本内容 */	content: attr(data-text); /* 绝对定位，确保文字能覆盖在原始文本上 */position: absolute; top: calc(50% - 105px);left: 0;width: 100%;/* 一定要注意高度设置，可能会导致元素切割出现错误 */height: 200px;/* 文字颜色 */color: #c1c1c1;}.text-split::before {/* 裁剪路径，只显示上半部分 */clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%); animation: crack1 1s forwards; } .text-split::after {/* 裁剪路径，只显示下半部分 */clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%); animation: crack2 1s forwards; } /* 向上移动 */@keyframes crack1 {0% { transform: translateY(0); } 100% { transform: translateY(-25px); } }/* 向下移动 */@keyframes crack2 {0% { transform: translateY(0); } 100% { transform: translateY(25px); } }/* 文字裂开时，中间要展示的文字部分 */.middle-text {position: absolute;top: 50%;left: 0;width: 100%;text-align: center;/* 文字颜色 */color: #eee;/* 使用多层不同的阴影叠加，实现文字发光 */text-shadow: 0 0 15px #00ffff,  		   0 0 30px rgba(0, 255, 255, 0.5),  0 0 50px rgba(0, 255, 255, 0.3);font-size: 24px; transform: translateY(-50%);/* 确保在伪元素之上显示 */z-index: 1;}</style>
</head><body><div class="image-container"><div class="image-wrapper" data-text="猜猜看">猜猜看</div><div class="image-wrapper" data-text="猜猜看">猜猜看</div><div class="image-wrapper" data-text="猜猜看">猜猜看</div></div><script>// 获取所有.image-wrapper元素let wrappers = document.querySelectorAll('.image-wrapper');// 鼠标进入时的具体操作function hover(element) {// 遍历所有.image-wrapper元素wrappers.forEach(function(wrapper) {if (wrapper !== element) {// 不是当前元素，添加模糊效果wrapper.classList.add('blur');}else{ // 是当前元素// 1.移除原本的文本属性，并显示完整图片wrapper.textContent = ''wrapper.style.webkitBackgroundClip = 'border-box';wrapper.style.backgroundClip = 'border-box';// 2.添加text-split类wrapper.classList.add('text-split')// 3.设置中间文字元素const middleText = document.createElement('span');middleText.classList.add('middle-text');// 4.获取背景图片的url路径const backgroundImageUrl = window.getComputedStyle(wrapper).backgroundImage;// 4.1.url路径分解：先去除()'"等字符，并根据/切割const imageUrlSplits = backgroundImageUrl.replaceAll(/[()"' ]/g, '').split('/')// 4.2.url路径分解中的最后一个元素即为图片名称const imageName = imageUrlSplits.pop()// 4.3.根据背景图片的名称，设置要展示的文字const textContent = '，你猜对了吗？'if (imageName === 'nezha.jpg') {middleText.textContent = '我是哪吒' + textContent;} else if (imageName === 'aobing.jpg') {middleText.textContent = '我是敖丙' + textContent;} else if (imageName === 'xiaobao.jpg') {middleText.textContent = '我是申小豹' + textContent;} else {middleText.textContent = '未知图片';}// 5.添加中间文字元素wrapper.appendChild(middleText);}});}// 鼠标离开时的具体操作function leave(element) {// 遍历所有.image-wrapper元素wrappers.forEach(function (wrapper) {// 移除模糊效果wrapper.classList.remove('blur');if (wrapper === element) {// 移除中间文字元素const middleText = wrapper.querySelector('.middle-text');if (middleText) {wrapper.removeChild(middleText);}// 添加文字裁剪效果wrapper.style.webkitBackgroundClip = 'text';wrapper.style.backgroundClip = 'text';// 移除文字分裂效果wrapper.classList.remove('text-split');wrapper.textContent = wrapper.dataset.text;}});}// 鼠标进入时效果function handleMouseOver() {hover(this);}// 鼠标移除时效果function handleMouseOut() {leave(this);}// 为每个.image-wrapper元素添加事件监听器wrappers.forEach(function (wrapper) {wrapper.addEventListener('mouseover', handleMouseOver);wrapper.addEventListener('mouseout', handleMouseOut);});// 页面卸载时，清除事件监听window.addEventListener('beforeunload', function () {wrappers.forEach(function (wrapper) {wrapper.removeEventListener('mouseover', handleMouseOver);wrapper.removeEventListener('mouseout', handleMouseOut);});});</script>
</body>
</html>