【css酷炫效果】纯CSS实现字体动态裂纹纹理_css动效断裂的效果-优快云博客

本文链接：https://blog.youkuaiyun.com/u011561335/article/details/146342445

【css酷炫效果】纯CSS实现字体动态裂纹纹理

缘
创作背景
html结构
css样式
完整代码
效果图

想直接拿走的老板，链接放在这里：上传后更新

缘

创作随缘，不定时更新。这个真是调试的我发疯，控了我大半天的时间，要疯了都。后来发现不是代码问题。另外，图片选png格式的，别的格式无法透明化。测试的话要发布成服务访问才行，直接打开html是没用的。使用nginx或者tomcat或者node，总之，要发布出来，否则会有跨域问题。
在这里插入图片描述

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

<div class="masked-element">
  <div class="content"> HELLO FRIENDS~</div>
</div>

css样式

	.content {
		width: 300px;
		height: 300px;    
		font-size: xx-large;
		padding-top: 93px;
		text-align: center;
		
	  position: absolute; 
	  background: inherit;  
	  mask-image: url(A.png);
	  animation: crackAnimation 3s linear infinite;
	}
	@keyframes crackAnimation {
	  0% {
		mask-position: 0% 0%;
		opacity: 0;
	  }
	  50% {
		opacity: 1;
	  }
	  100% {
		mask-position: 100% 100%;
		opacity: 1;
	  }
	}

完整代码

<html>
<head>
    <title>夜影</title>
    <style>
	.content {
		width: 300px;
		height: 300px;    
		font-size: xx-large;
		padding-top: 93px;
		text-align: center;
		
	  position: absolute; 
	  background: inherit;  
	  mask-image: url(A.png);
	  animation: crackAnimation 3s linear infinite;
	}
	@keyframes crackAnimation {
	  0% {
		mask-position: 0% 0%;
		opacity: 0;
	  }
	  50% {
		opacity: 1;
	  }
	  100% {
		mask-position: 100% 100%;
		opacity: 1;
	  }
	}

    </style>
</head>
<body>
<div class="masked-element">
  <div class="content"> HELLO FRIENDS~</div>
</div>
</body>
</html>