2021-01-17_154418.png
利用filter（滤镜）， linear-gradient（渐进色），animation（动画实现）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>流光字</title>
</head>
<style>
body {
background-color: #666666;
}
div {
margin: 100px 100px;
}
.lgz {
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
border-radius: 30px;
background-image: linear-gradient(90deg ,#ff44aa, red, yellow,#ff44aa);
background-size: 400% 100%;
position: relative;
color: white;
}
.lgz a {
display: inline-block;
vertical-align: middle;
}
.lgz a::before {
content: "";
filter: blur(10px);
position: absolute;
border: #631818 solid 1px;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
background-image: linear-gradient(90deg ,#ff44aa, red, yellow,#ff44aa);
display: inline-block;
z-index: -1;
border-radius: 30px;
background-size: 300% 100%;
}
.lgz:hover {
cursor: pointer;
animation: mymove 5s infinite;
}
@keyframes mymove {
100% {
background-position: -200% 0;
}
}
</style>
<body>
<div class="lgz">
<a>测试11</a>
</div>
</body>
</html>
