使用纯CSS如何实现文字断开的动画效果 - 行业资讯 - 肥雀云

　　介绍

使用纯CSS如何实现文字断开的动画效果?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

定义dom,只有一个元素,元素有一个数据电文属性,属性值等于元素内的文本:

& lt; div类=皌ext"数据电文=癇REAK"祝辞BREAK

居中显示:

html,身体{ 　　高度:100%; 　　显示:flex; 　　对齐项目:中心; 　　justify-content:中心; 　　}

设置渐变背景色:

身体{ 　　背景:线性渐变(褐色、黄褐色); 　　}

设置文本的字体字号:

。文本{ 　　字体大小:5 em; 　　字体类型:“arial black"; 　　}

利用伪元素增加文字:

。文本{ 　　位置:相对; 　　} 　　　　之前。text::, 　　{后。text:: 　　内容:attr(数据电文); 　　位置:绝对的; 　　上图:0; 　　左:0; 　　颜色:浅黄色; 　　}

设置左侧文字的遮罩:

。文本:{之前　　background - color:暗绿色; 　　clip-path:多边形(0 0 0 0 60%,30% 100%,100%); 　　}

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

。{后文本: 　　background - color: darkblue; 　　clip-path:多边形(0 0 60%,100%,100%,100%,30%,100%); 　　}

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

。text::, 　　{后。text:: 　　过渡:0.2秒; 　　} 　　　　{前。text:徘徊:: 　　左:-0.15 em; 　　} 　　　　{后。text:徘徊:: 　　左:0.15 em; 　　}

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

。文本{ 　　颜色:透明; 　　} 　　　　{前。text::/*背景颜色:暗绿色;*/} 　　　　{后。text::/*背景颜色:darkblue; */}

两侧文字增加歪斜效果:

。文本:徘徊::{之前　　变换:旋转(5度); 　　} 　　　　{后。text:徘徊:: 　　变换:旋转(5度); 　　}

微调文字的高度:

。文本:徘徊::{之前　　上图:-0.05 em; 　　} 　　　　{后。text:徘徊:: 　　上图:0.05 em; 　　}

大功告成!

感谢各位的阅读!看完上述内容,你们对使用纯CSS如何实现文字断开的动画效果大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。