tnblog
首页
视频
资源
登录
原

TNBLOG论坛新型加载效果

6854人阅读 2019/6/6 20:13 总访问：3467451 评论：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页面代码:

  1. <!DOCTYPE html>

  2. <html>

  3. 	<head>

  4. 		<meta charset="utf-8" />

  5. 		<title></title>

  6. 		<link rel="stylesheet" type="text/css" href="css/index.css"/>

  7. 	</head>

  8. 	<body>

  9. 		<div class="loading">

  10. 			<p>tnblog</p>

  11. 		</div>

  12. 	</body>

  13. </html>

css样式：

  1. body{

  2. 	padding: 0;

  3. 	margin: 0;

  4. 	width: 100%;

  5. 	height: 100vh;

  6. 	position: relative;

  7. 	background: url(../img/bg.jpg);

  8. 	background-size: cover;

  9. 	background-repeat:no-repeat;

  10. }

  11. .loading{

  12. 	position: absolute;

  13. 	left: 50%;

  14. 	top: 50%;

  15. 	transform: translate(-50%,-50%);

  16. }

  17. .loading p{

  18. 	font-size: 6em;

  19. 	color: rgba(255,255,255,0.3);

  20. 	background-image: url(../img/water.png);

  21. 	/*字体大写*/

  22. 	text-transform: uppercase;

  23. 	/*字中间的间距*/

  24. 	letter-spacing: 8px;

  25. 	-webkit-background-clip:text;

  26. 	font-weight: 500;

  27. 	animation: wave 30s linear infinite; 

  28. }

  29. @keyframes wave{

  30. 	from{

  31. 		background-position: 0 0;

  32. 	}

  33. 	to{

  34. 		background-position: 1000px 0;

  35. 	}

  36. }



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

评价

TNBLOG端午节
效果图:HTML代码:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;/&gt; &lt;...

TNBLOG(Button)
Web Page Effect:Html code:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;/&g...

关于TNBLOG简版搜索
tnblog简版搜索支持多个关键字，关键字之间可以使用空格隔开，或者下划线隔开。如果是空格格式则是or连接，满足一个即可，...

TNBLOG markdown画图
tnblog画图graph LR; 　　A-->B; 　　A-->C; 　　B-->D;sequenceDiagram participant Alice participant Bob ...

关于TNBLOG markdown
我们对markdown进行了深度的优化和高度的自定义功能比如更人性化的即时预览效果扩展语法等并且持续不断的完善优化中tnlog m...
这一世以无限游戏为使命！
博主信息
排名
2
文章
634
粉丝
44
评论
93
文章类别
最新文章
最新评价
docker中Sware集群与service
尘叶心繁 : 想学呀！我教你呀
一个bug让程序员走上法庭 索赔金额达400亿日元
叼着奶瓶逛酒吧 : 所以说做程序员也要懂点法律知识
.net core 塑形资源
剑轩 : 收藏收藏
映射AutoMapper
剑轩 : 好是好，这个对效率影响大不大哇,效率高不高
ASP.NET Core 服务注册生命周期
剑轩 : http://www.tnblog.net/aojiancc2/article/details/167
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术