tnblog
首页
视频
资源
登录

TNBLOG(Button)

4768人阅读 2019/7/19 13:55 总访问:2534693 评论:1 收藏:0 手机
分类: 前端

Web Page Effect:

Html code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
				background: #0c002b;
				font-family: sans-serif;
			}
			a{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				color: #1670f0;
				padding: 30px 60px;
				font-size: 30px;
				/* 字体之间间隔距离 */
				letter-spacing: 2px;
				text-transform: uppercase;
				text-decoration: none;
				/* 字体的气场 */
				box-shadow: 0 20px 50px rgba(0,0,0,.5);
			}
			a:before{
				content: '';
				position: absolute;
				top: 2px;
				left: 2px;
				bottom: 2px;
				width: 50%;
				background-color: rgba(255,255,255,0.05);
			}
			a span:nth-child(1){
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 2px;
				background: linear-gradient(to right,#0c002b,#1779ff);
				animation: animate1 2s linear infinite;
			}
			a span:nth-child(2){
				position: absolute;
				top: 0;
				right: 0;
				width: 2px;
				height: 100%;
				background: linear-gradient(to bottom,#0c002b,#1779ff);
				animation: animate2 2s linear infinite;
			}
			a span:nth-child(3){
				position: absolute;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 2px;
				background: linear-gradient(to left,#0c002b,#1779ff);
				animation: animate3 2s linear infinite;
			}
			a span:nth-child(4){
				position: absolute;
				bottom: 0;
				left: 0;
				width: 2px;
				height: 100%;
				background: linear-gradient(to top,#0c002b,#1779ff);
				animation: animate4 2s linear infinite;
			}
			@keyframes animate1{
				0%{
					transform: translateX(-100%);
				}
				100%{
					transform: translateX(100%);
				}
			}
			@keyframes animate2{
				0%{
					transform: translateY(-100%);
				}
				100%{
					transform: translateY(100%);
				}
			}
			@keyframes animate3{
				0%{
					transform: translateX(100%);
				}
				100%{
					transform: translateX(-100%);
				}
			}
			@keyframes animate4{
				0%{
					transform: translateY(100%);
				}
				100%{
					transform: translateY(-100%);
				}
			}
		</style>
	</head>
	<body>
		<a href="#">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			tnblog
		</a>
	</body>
</html>



欢迎加群讨论技术,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
欢迎加群交流技术