TNBLOG端午节
电脑版发表于：2019/6/8 18:08
效果图:
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>