tnblog
首页

TNBLOG论坛新型加载效果

26人阅读 2019/6/6 20:13 评论:0 手机浏览 收藏
分类: 前端

效果图:

图片资源地址:

https://raw.githubusercontent.com/mrslimslim/code-magic/master/text-background-01/bg.jpg

https://raw.githubusercontent.com/mrslimslim/code-magic/master/text-background-01/water.png

html页面代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="loading">
			<p>tnblog</p>
		</div>
	</body>
</html>

css样式:

body{
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100vh;
	position: relative;
	background: url(../img/bg.jpg);
	background-size: cover;
	background-repeat:no-repeat;
}
.loading{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.loading p{
	font-size: 6em;
	color: rgba(255,255,255,0.3);
	background-image: url(../img/water.png);
	/*字体大写*/
	text-transform: uppercase;
	/*字中间的间距*/
	letter-spacing: 8px;
	-webkit-background-clip:text;
	font-weight: 500;
	animation: wave 30s linear infinite; 
}
@keyframes wave{
	from{
		background-position: 0 0;
	}
	to{
		background-position: 1000px 0;
	}
}


评价
!咖喱棒!
文章
6
评论
8
分类
16
关注
16
{{item.ArticleTitle}}
{{item.BlogName}} : {{item.Content}}