tnblog
首页
登录

TNBLOG(Button)

101人阅读 2019/7/19 13:55 评论:1 手机 收藏 关注
分类: 前端

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>


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