甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
这篇文章将为大家详细讲解有关怎么使用纯CSS代码实现文字断开的动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
专注于为中小企业提供网站设计、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业南川免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了超过千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
代码解读
定义dom，只有一个元素，元素有一个data-text属性，属性值等于元素内的文本：
居中显示：
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代码实现文字断开的动画效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。