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>
