[CSS][交互]断开的文字效果

知识点: clip-path:polygon()

code time

<style>
html,body{
    height:100%;
    background:linear-gradient(brown,sandybrown);
    display:flex;
    justify-content: center;
    align-items: center;
}

.text{
    position:relative;
    font:5em/5em "arial black";
    color:transparent
}

.text::before,.text::after{
    position:absolute;
    top:0;left:0;
    content: attr(data-text);
    transition: .2s;
    color:lightyellow
}

.text::before{
    clip-path: polygon(0 0,73% 0,30% 100%,0 100%);
}

.text::after{
    clip-path: polygon(72% 0,100% 0,100% 100%,30% 100%);
}

//效果
.text:hover::before{
    left: -0.15em;
    top:.05em;
    transform: rotate(-5deg);
}

.text:hover::after{
    left:.15em;
    top:.05em;
    transform: rotate(5deg);
    
}
</style>
<div class="text" data-text="BREAK">BREAK</div>

clip-path polygon图形构建与动画变换二三事