我们先来看看效果的实现
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第二天</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#">流光按钮</a>
</body>
</html>
css代码
*{
padding: 0%;
margin: 0%;
}
body{
width: 100vw;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
a{
position: relative;
background-color: #000000;
padding: 12px 40px;
border-radius: 30px;
font-size: 30px;
color: #FFF;
text-decoration: none;
background-image: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
background-size: 400%;
z-index: 1;
}
a:hover{
animation: show 8s linear infinite;
}
@keyframes show{
0%{
background-position: 0%;
}
100%{
background-position: 400%;
}
}
a::before{
position: absolute;
content:"";
top:-5px;
left:-5px;
right:-5px;
bottom:-5px;
background-image: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
background-size: 400%;
border-radius: 40px;
z-index: -1;
filter:blur(20px);
opacity:0;
}
a:hover::before{
opacity:1;
animation: show 8s linear infinite;
}
新学到的知识总结
标签 | 作用 |
---|
z-index | 设置图像显示的优先级,和单片机定时器优先级一样 |
animation | 使用简写属性,将动画与 div 元素绑定: |
show 8s linear infinite | 8s一个循环,无线循环 |
filter | filter 属性定义了元素(通常是img)的可视效果(例如:模糊与饱和度)。 【滤镜】 |
filter:blur(20px) | 高斯模糊, |
opacity | 设置 div 元素的不透明级别 0就是不显示了 |