CSS3 文本溶解效果

秒速五厘米 2024-04-17 17:47 9阅读 0赞

背景颜色为白色的效果  
![在这里插入图片描述][20190829152127996.gif]  
背景颜色设为灰时的效果，白色的范围是字体阴影  
![在这里插入图片描述][20190829151758883.gif]

<!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>

[20190829152127996.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e611203fbfdd4f5b851a6bcd7bf698c7.gif
[20190829151758883.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/efca5dcbf8184eceb096b61884a2e05e.gif