给文字添加动态背景

1,803次阅读

<!DOCTYPE html>
<html lang="en">
	<head> 
		<meta charset="UTF-8" /> 
		<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
		<meta name="viewport" content="width=device-width,nitial-scale=1.0" /> 
		<title> 给文字添加动态背景 </title> 
		<style>
			.text{ 
				width:1000px; 
				font-size:70px; 
				font-weight:900; 
				background:url("https://images.alanwu.cc/TuSiJi/2022/10/2db098d9e568b19a.jpg"); 
				background-clip:text; 
				-webkit-background-clip:text; 
				color:transparent; 
				animation:dynamic 5s infinite alternate linear; 
			} 
			@keyframes dynamic{ 
				0%{background-position:50%;} 
				100%{background-position:100%;} 
			} 
		</style> 
	</head> 
	<body> 
		<div class="text"> 
			<center>
				<h1>Hello Word !</h1>
			</center> 
		</div>  
	</body>
</html>

给文字添加动态背景