本文主要是介绍CSS3 文本溶解效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
背景颜色为白色的效果
背景颜色设为灰时的效果，白色的范围是字体阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>文本溶解效果</title>
<style>
#container{margin: 3rem;/** contrast指的是图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1，即100%。降低对比度能让黑和白的界限更模糊，从而达到这种溶解的效果*/filter: contrast(10);
}
#A,#B{color: black;text-align: center;font-size: 200px;font-weight: bold;position: absolute;white-space: nowrap;/**溶解的动画，主要是由阴影和低对比度配合实现的（二者缺一不可）黑色的字体，加上白色的阴影，叠加形成减淡效果，用来模拟溶解*/text-shadow: 0px 0px 120px white;
}
#A {/**infinite 表示动画反复alternate 表示动画交替执行，即从开始到结束，再从结束到开始reverse 表示顺序颠倒*/animation: blur 5s infinite alternate-reverse;
}
#B {animation: blur 5s infinite alternate;
}
/**
模糊动画
*/
@keyframes blur {0% {opacity: 0;filter: blur(28px)}10% {opacity: 0;}90% {opacity: 1;}100% {opacity: 1;filter: blur(6px)}
}
</style>
</head>
<body>
<div id="container"><div id="A">Tencent</div><div id="B">Google</div>
</div>
</body>
</html>
这篇关于CSS3 文本溶解效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
