tnblog
首页
视频
资源
登录

TNBLOG论坛新型加载效果

6435人阅读 2019/6/6 20:13 总访问:3223810 评论:0 收藏: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;
	}
}



欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739

评价
这一世以无限游戏为使命!
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术