1.1 流光按钮
>效果展示
button
>完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>流光按钮</title>
<style>
#demo1 * {
margin: 0;
padding: 0;
}
#demo1 a {
text-decoration: none;
position: absolute;
left: 50%;
top: 50%;
/* 按钮居中 */
transform: translate(-50%, -50%);
font-size: 24px;
/* 线性渐变 */
background: linear-gradient(90deg, #00aaff, #ffaaff, #ffff00, #00aaff);
/* 放大背景 */
background-size: 400%;
width: 400px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
/* 内容始终大写 */
text-transform: uppercase;
border-radius: 50px;
/* 设置层级关系，仅能在定位元素上奏效 */
z-index: 1;
}
#demo1 a::before {
content: "";
position: absolute;
left: -5px;
right: -5px;
top: -5px;
bottom: -5px;
/* 线性渐变 */
background: linear-gradient(90deg, #00aaff, #ffaaff, #ffff00, #00aaff);
/* 放大背景 */
background-size: 400%;
border-radius: 50px;
/* 设置滤镜 */
filter: blur(10px);
/* 设置层级关系，仅能在定位元素上奏效 */
z-index: -1;
}
#demo1 a:hover::before {
/* 鼠标停留开始动画，无限循环 */
animation: sum 8s infinite;
}
#demo1 a:hover {
/* 鼠标停留开始动画，无限循环 */
animation: sum 8s infinite;
}
@keyframes sum {
/* 更改背景图片位置 Y轴不变 */
100% {
background-position: -400% 0;
}
</style>
</head>
<body>
<div id="demo1">
<a href="#">button</a>
</div>
</body>
</html>