字体断裂效果,断裂效果字体设计

clip-path属性

　　 创建一个只有元素的部分区域，可以显示的剪切区域。区域内的部分显示，区域外的隐藏。

　　h1 data-Text= Text Crack span Text Crack/span/h1使用元素的伪元素复制两份文本，再使用剪辑路径将元素本身、元素的两个伪元素分为3部分，分别对这3部分进行控制

　　body，html { display:flex；身高：100%;宽度：100%;背景色：# 000;溢出：隐藏；字体系列：无衬线字体；} h1 {位置：相对；边距：自动；字体大小：calc(20px 5vw)；字体粗细：粗体；颜色：# fff字母间距：0.02毫米文本转换：大写；文字-阴影：0 0 10px蓝色；用户选择：无；空白：nowrap滤镜：模糊(0.007 em)；动画：摇2.5秒线性向前；} h1 span {位置：绝对；top:0；左：0;transform: translate(-50%，-50%)；裁剪路径：多边形(10% 0%,44% 0%,70% 100%,55% 100%);} h1:before，h1:after { content:attr(data-text)；位置：绝对；top:0；左：0;} h1:之前{动画：crack1 2.5s线性向前；裁剪路径：多边形(0% 0%,10% 0%,55% 100%,0% 100%);} h1:after {动画：破解2 2.5s线性向前；裁剪路径：多边形(44% 0%,100% 0%,100% 100%,70% 100%);} @关键帧抖动{ 5%,15%,25%,35%,55%,65%,75%,95% {滤镜：模糊(0.018 em)；变换：平移y(0.018 em)旋转(0度)；} 10%、30%、40%、50%、70%、80%、90% {滤镜：模糊(0.01 em)；变换：平移y(-0.018 em)旋转(0度);} 20%,60% {滤镜：模糊(0.03 em)；转换：平移(-0.018微米，0.018微米)旋转(0度)；} 45%,85% {滤镜：模糊(0.03 em)；转换：平移(0.018微米，-0.018微米)旋转(0度)；} 100% {滤镜：模糊(0.007 em)；变换：平移(0)旋转(-0.5度);} } @关键帧crack1 { 0%，95% { transform: translate(-50%，-50%)；} 100% { transform: translate(-51%，-48%)；} } @关键帧crack2 { 0%，95% { transform: translate(-50%，-50%)；} 100% { transform: translate(-49%，-53%)；}}因为使用了剪辑路径裁剪后的元素，只有元素的剪切区域才能被显示，所以我们可以分别控制3个部分进行动画

　　最终效果如下

　　到此这篇关于钢性铸铁实现文字断裂效果的示例代码的文章就介绍到这了，更多相关钢性铸铁文字断裂内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。