紧贴墙面运动的文字

本文主要是介绍紧贴墙面运动的文字，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果展示

在这里插入图片描述

CSS 知识点

clip-path 属性的运用
视觉错觉运用

实现页面基础结构

<section><!-- 右侧文字 部分 --><div class="skew1"><h2 class="layer">Corner Text</h2></div><!-- 左侧文字 部分 --><div class="text_box"><div class="skew2"><h2 class="layer">Corner Text</h2></div></div>
</section>

效果实现思路

想要实现上述的效果，我们可以用两个相同色系的色块来作为墙体，只是一个色块的明亮程度高点，另外一个色块的明亮度比较低，这样就可以形成视觉差，这样就可以让我们看到一个转角的墙体。其中需要注意的是，明亮度高的墙体我们可以使用clip-path控制元素展示区域的部分。

文字我们也采用两个文字来实现，一个文字在明亮度高的墙体上，一个文字在明亮度低的墙体上。在明亮度低的文字在视觉上要比较暗，并且两个文字都进行旋转形成一个夹角。

做到上述两点后，整体效果就会给人感觉文字在紧贴墙脚折行。

实现右侧暗部分的背景效果

section {position: relative;width: 100%;height: 100vh;background: #222;overflow: hidden;
}

实现左侧明亮部分的背景效果

section .text_box {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #333;/* 使用 clip-path 属性控制元素的展示部分 */clip-path: polygon(0 0, 53% 0, 53% 100%, 0% 100%);
}

实现文字效果

.skew1 h2,
.text_box .skew2 h2 {position: absolute;width: 100%;text-align: center;font-size: 12em;line-height: 1em;color: #0488f5;cursor: pointer;
}/* 背阴面的透明度进行修改，从而有视觉上的错差 */
.skew1 h2 {opacity: 0.6;
}/* 进行旋转，从而长生对应的折叠效果 */
.skew1 {position: relative;top: 50px;transform: skewY(20deg);
}.skew2 {position: relative;top: 91px;transform: skewY(340deg);
}

实现文字跟随鼠标移动

document.addEventListener("mousemove", (e) => {document.querySelectorAll(".layer").forEach((layer) => {let x = (window.innerWidth - e.pageX * 2) / 2;layer.style.transform = `translateX(${x}px)`;});
});