12纯 CSS 创作一种文字断开的交互特效

原文地址：https://segmentfault.com/a/1190000014719591

总结：三部分组成，原文透明，左右都与原文重叠（绝对定位），但左右各取相应一部分。

HTML代码：

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="text" data-text="BREAK">BREAK</div>
    </body>
</html>

CSS代码：

html, body {
    margin:;
    padding:;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* */
/* 设置渐变背景色 */
body{
    background: linear-gradient(brown, sandybrown);
}
.text{
    font-size: 5em;
    font-family: "arial black";
    position: relative;
    /* 透明 */
    /* color: transparent; */
}
/* 利用伪元素增加文字 */
.text::before,
.text::after{
    content: attr(data-text);
    /* 使before 和after 内容与text重合 */
    position: absolute;
    top:;
    left:;
    color: lightyellow;
    transition: 0.2s;
}
/* 设置左侧文字的遮罩 */
.text::before{
    /* background-color: darkgreen; */
    /* 图形的四个部分 */
    clip-path: polygon(0 0, 60% 0, 30% 100%, 0 100%);
}
/* 设置右侧文字的遮罩 */
.text::after {
    /*background-color: darkblue; */
    clip-path: polygon(60% 0, 100% 0, 100% 100%, 30% 100%);
}
.text:hover::before {
    /* 当鼠标划过时，遮罩的文字分别向两侧偏移 */
    left: -0.15em;
    /* 两侧文字增加歪斜效果 */
    transform: rotate(-5deg);
    /* 微调文字的高度 */
    top: -0.05em;
}

.text:hover::after {
    left: 0.15em;
    transform: rotate(5deg);
    top: 0.05em;
}