css 中文字动画效果代码,如何使用纯CSS实现文字断开的动画效果（附源码）

本篇文章给大家带来的内容是关于如何使用纯CSS实现文字断开的动画效果(附源码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果预览

源代码下载

https://github.com/comehope/front-end-daily-challenges/tree/master/012-broken-text-effects

代码解读

定义 dom，只有一个元素，元素有一个 data-text 属性，属性值等于元素内的文本：

BREAK

居中显示：html, body {

height: 100%;

display: flex;

align-items: center;

justify-content: center;

}

设置渐变背景色：body {

background: linear-gradient(brown, sandybrown);

}

设置文本的字体字号：.text {

font-size: 5em;

font-family: "arial black";

}

利用伪元素增加文字：.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(0 0, 60% 0, 30% 100%, 0 100%);

}

设置右侧文字的背景和遮罩：.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;

}

大功告成！

相关推荐：