原

TNBLOG端午节

6389人阅读 2019/6/8 18:08 总访问：3467521 评论：2 收藏：0 手机

分类: 前端

效果图:

HTML代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="https://fonts.font.im/css?family=Hanalei+Fill" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				font-family: 'Hanalei Fill', cursive;
			}
			body{
				background-color: black;
			}
			.entoContent{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				color: azure;
			}
			.celxerhe{
				color: beige;
				font-size: 8em;
				text-shadow: 4px -1px 3px sandybrown;
				animation: amcchb 8s linear infinite;
				
			}
			.entoContent span{
				display: block;
				text-shadow: 0px 3px 33px white;
				text-align: center;
			}
			@keyframes amcchb{
				33%{
					color: beige;
					text-shadow: 8px -1px 5px sandybrown;
				}
				55%{
					color: rebeccapurple;
					text-shadow: 12px -1px 12px blueviolet;
				}
				86%{
					color: aquamarine;
					text-shadow: 16px -1px 16px darkblue;
				}
			}
		</style>
	</head>
	<body>
		<div class="entoContent">
			<span class="celxerhe">TNBLOG</span> 
			<span class="celxerby">
				2019@ 礼轻情意粽 <i class="fa fa-gifts" style="color: lightgoldenrodyellow;"></i>
			</span> 
		</div>
	</body>
</html>