怎么使用纯CSS代码实现文字断开的动画效果

居中显示：

html,body{

height:100%;

display:flex;

align-items:center;

justify-content:center;

}

设置渐变背景色：

body{

background:linear-gradient(brown,sandybrown);

}

设置文本的字体字号：

.text{

font-size:5em;

font-family:"arialblack";

}

利用伪元素增加文字：

.text{

position:relative;

}

.text::before,

.text::after{

content:attr(data-text);

position:absolute;

top:0;

left:0;

color:lightyellow;

}

设置左侧文字的遮罩：

.text::before{

background-color:darkgreen;

clip-path:polygon(00,60%0,30%100%,0100%);

}

设置右侧文字的背景和遮罩：

.text::after{

background-color:darkblue;

clip-path:polygon(60%0,100%0,100%100%,30%100%);

}

当鼠标划过时，遮罩的文字分别向两侧偏移：

.text::before,

.text::after{

transition:0.2s;

}

.text:hover::before{

left:-0.15em;

}

.text:hover::after{

left:0.15em;

}

隐藏辅助元素，包括原始文字和伪元素的背景色：

.text{

color:transparent;

}

.text::before{

/*background-color:darkgreen;*/

}

.text::after{

/*background-color:darkblue;*/

}

两侧文字增加歪斜效果：

.text:hover::before{

transform:rotate(-5deg);

}

.text:hover::after{

transform:rotate(5deg);

}

微调文字的高度：

.text:hover::before{

top:-0.05em;

}

.text:hover::after{

top:0.05em;

}

关于“怎么使用纯CSS代码实现文字断开的动画效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。