会动的文字背景

最新推荐文章于 2021-03-10 11:27:52 发布

Ron韦斯莱

最新推荐文章于 2021-03-10 11:27:52 发布

阅读量435

点赞数

本文链接：https://blog.csdn.net/qq_43537987/article/details/90580201

版权

效果展示：
在这里插入图片描述
代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	html,body {
		width: 100%;
		height: 100%;
	}
	.container {
		position: relative;
		width: 100%;
		height: 100%;
		background: #000;
	}
	p {
		position: absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		font-size: 200px;
		text-transform: uppercase;
		font-weight: 800;
		letter-spacing: 20px;	
		background: url('bg1.jpg') center no-repeat;
		background-size: cover;		
		background-clip: text;
		-webkit-background-clip: text;
		tetx-fill-color:transparent;
		-webkit-text-fill-color:transparent;
		animation:move 5s linear  0s infinite;
		animation-direction:alternate;
 	}	
 	@keyframes move {
 		form {
			background-position: 0% 0%;
 		}
 		to {
			background-position: 100% 100%;
 		}
 	}
	</style>
</head>
<body>
	<div class="container">
		<p>text</p>
	</div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ron韦斯莱

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
会动的文字背景

效果展示：代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } html,body {...
复制链接

扫一扫