CSS3 文本溶解效果

最新推荐文章于 2023-11-22 15:53:29 发布

福州司马懿

最新推荐文章于 2023-11-22 15:53:29 发布

阅读量1.8k

点赞数

分类专栏： # CSS3 动画

转载请注明出处——https://blog.csdn.net/chy555chy

本文链接：https://blog.csdn.net/chy555chy/article/details/100139056

版权

CSS3 动画专栏收录该内容

12 篇文章 1 订阅

订阅专栏

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

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

福州司马懿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 文本溶解效果

背景颜色为白色的效果背景颜色设为灰时的效果<!DOCTYPE html><html><head><meta charset="utf8"><title>文本溶解效果</title><style>#container{ margin: 3rem; /** contrast指的是图像的对比度...
复制链接

扫一扫

专栏目录